Editor searchList support dynamic search

[steff-o]

Closes #1499 and fixes #1498

Actually I ended up rewriting almost the whole shebang as the previous implementation had some bugs and the easiest way to get rid of them was to do it in a another way instead of try to patch it. Most stuff is backwards compatible.

New Features

• The searchList can be configured to query a server for suggestions after each keypress
• The list of options can be fetched from a remote server when the dialog is opened
• Possibility to only allow values that is in the list (without using required)
• Added help messages when no suggestions are found

Fixed Bugs

• The searchList works more than the first time the attribute editor is opened
• The searchList works for related tables
• The searchList works with autoForm
• Some glitches in the help text container (which previously only was empty to denote no matches).

Breaking Changes

• The validation is NOT backwards compatible. Previous implementation assumed that if the input was required it also implied that the value must be present in the list of items. I split that in to two different configurations and to make it more intuitive the default behaviour of required does not imply that the value must be present in the list of items. I figured as the usage of searchList is probably not very widespread as it has not been working for a while it wouldn't matter.
• Arbitrary awesome configuration can not be passed. Only documented parameters can be set. Previous implementation used Object.assign(), but I removed that to only support selected options.
• The DOM elements have changed some classes and id-field and possibly types so if someone has done some advanced DOM querying that may break;

Remaining Issues

• If the drop down does not fit in the modal, it does not look good, but works.

Usage
Earlier configuration should work with the exception listed in breaking changes. But as the documentation is a bit vague, here comes a complete example of all possible configurations.

All possible configuration

{
          "name": "fritext",
          "title": "Fastighetsbeteckning",
          "type": "searchList",
          "maxLength" : 123,
          "required": true,
          "list": [
            //{
            //  "value": "Sel",
           //   "src": "http://localhost/static/sel.jpg"
            //},
            //{
            //  "value": "Stan"
            //},
            //"Obygden"
            //,
            {
              "location": "http://localhost/static/",
              "extension" :  "png"
            }
          ],
          "config": {
            "url": "http://localhost:3000/dynamic",
            "queryParameter": "input",
            "dynamic": true,
            "allowOnlyFromList": true,
            "disallowDropDown": true,
            "typeMoreText": "Skriv då",
            "noHitsText": "Go fish",
            "minChars": 2,
            "maxItems": 3
          }

Properties set directly on attribute level is supported as in documentation with the following exceptions/explanations:

• required Optional. true if the input must contain a value. Previous implementation assumed that the value also must be in the list of suggestions.
• maxLength: Optional. Max length of input. defaults to 50. I didn't touch that one, it just was not documented.

The list property works like before, I haven't messed at all with that:
It is a list of objects which can either have:

• A value and optionally a src. The src is an url to an image to display next to the value. The src is relative to the application no matter where configuration comes from, or absolute.
• A location and a extension property. The location is an url to a HTML document that contains links to image files, typically a file listing page as generated by a webserver. All a tags in the document with the extension extension is used as list values. The filename is the value, and the image itself is displayed next to the value in the drop down. location can not be combined with static list items and can not appear in a list returned from a server using the url option. This is exactly as before.
• An array of strings which is used as labels.

The config property can contain the following options:

• url Optional. An url to a service that will provide a list object. If specified the static list configuration is ignored. The server should return a JSON list as described above with the exception that location is not supported as that would be ridiculous. It could be a static file or dynamically generated content.
• dynamic Optional. if true the url is queried for each key press in the input. The server should accept a query parameter which will receive the current value of the input field. The server should return a list of matching search items. The exact algorithm is up to the server, but origo will assume the list is filtered and sorted so the list will be displayed as is as suggestions, but will be truncated to maxItems. If the server's algorithm is not based on substrings of the value, the highlighting may not work as expected.
• queryParameter Optional The name of the query parameter to send when dynamicis true. Defaults to input
• allowOnlyFromList Optional. true if the user only can input values from the list. Replaces the required validation for list values.
• disallowDropDown Optional. If true the very special function to override minChar when input is empty. If not specified, the user can click the down arrow (or enter) when input is empty and get all possible suggestions. Not sure why, but is was there before and seems to sort of mimic a select input. Should most certainly be set to true when using dynamic
• typeMoreText Optional. The text to show to the user if the input has less then minChar characters. Defaults to "Skriv fler tecken".
• noHitsText Optional. The text to show to the user if there are no suggestions to show. Defaults to "Inga träffar".
• minChars Optional. Minimum number of characters required to get a suggestion. Defaults to 2.
• maxItems Optional. Maximum number of suggestions to display. Defaults to 10.

Here's the code to a test server to be used as url. It works both for dynamic mode and non-dynamic:

const express = require('express')
const app = express();

const listan = ["bertil", "ansgar", "angus", "bengt", "caesar", "cesar", "the captain"];


app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get('/dynamic', function (req, res) {
  const input = req.query.input;
  let result = listan;
  if (input !== undefined) {
    result = listan.filter(item => item.includes(input)).sort().map(item => ({ value: item }));
  }
  console.log(input);
  setTimeout( () => res.json(result), 1000);
});


app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function () {
  console.log('Express server listening on port ' + app.get('port'));
});

[steff-o]

As a bonus I added a utility spinner and moved over infowindow to use it. I had plans to make a CSS spinner, but I took the gif from infowindow to avoid messing with the layout there.