jquery ui автозаполняет виджет

https://stackoverflow.com/questions/2382497

24-09-2019
|

Вопрос

Я ищу использовать jquery ui автозаполнение Виджет для реализации поиска пользователей по первой или фамилии. Похоже, по умолчанию AutoComplete смотрит вверх по словам последовательности символов, независимо от его возникновения в слове. Так что, если у вас есть данные, такие как: javascript, asp, haskell и вы вводите в 'as' Вы получите все три. Я хотел бы только соответствовать началу этого слова. Так в приведенном выше примере вы получаете только 'asp'. Отказ Есть ли способ настроить виджет автозаполнения для этого?

В конечном итоге было бы даже лучше соответствие на начало первого или фамилии Как будто это в Gmail.

Примечание. Я пытаюсь выяснить способ сделать это, используя виджет jQuery UI специально. Поскольку я уже использую jQuery ui в моем проекте, я планирую придерживаться с ним и постараться добавлять дополнительные библиотеки в мое веб-приложение.

Решение

В jquery ui v1.8rc3, Автозаполненный виджет принимает а источник Опция, которая может быть либо строкой, массивом или функцией обратного вызова. Если это строка, AutoComplete делает This One URL для получения вариантов / предложений. Если массив, автозаполнение делает поиск, как вы указали, для наличия напечатанных символов в любом положении в условиях массива. Окончательный вариант - это то, что вы хотите - функция обратного вызова.

Из автозаполнения документации:

Третий вариант, обратный вызов, обеспечивает наибольшую гибкость и может использоваться для подключения любого источника данных для автозаполнения. Обратный вызов получает два аргумента:

• а request Объект с одним свойством под названием «термин», который относится к значению в настоящее время в входе текста. Например, когда пользователь ввел «новый йо» в поле «Новый YO», который установлен на автозаполнение, request.term проведет "новую йо".
• а response Функция, обратный вызов, который ожидает одного аргумента, чтобы содержать данные, чтобы предложить пользователю. Эти данные должны быть отфильтрованы на основе предоставленного срока, и должны быть массив в формате, разрешенном для простых локальных данных: строка-массив или объект-массив с меткой / значением / обеих свойств.

Пример кода:

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

Несколько ключевых моментов:

призыв к $.ui.autocomplete.escapeRegex(req.term); Это сбежать Термин поиска, так что любые значелые по регулированию регеляций в тексте, набранном пользователю, рассматриваются как простой текст. Например, точка (.) Значима для регулярного воздействия. Я узнал об этой функции escaperegex, читая исходный код автозаполнения.
линия с new Regexp(). Отказ Он указывает регулярное выражение, начиная с ^ (Coinflex), который подразумевает, он будет соответствовать только при наличии набранных символов в начале термина в массиве, который вы хотели. Он также использует вариант «I», который подразумевает совпадение в случае нечувствительности.
то $.grep() Утилита только вызывает предусмотренную функцию на каждом сроке в прилагаемом массиве. Функция в этом случае просто использует REGEXP, чтобы увидеть, является ли термин в массиве матча для того, что было напечатано.
Наконец, Repartfn () вызывается с результатом поиска.

Рабочая демонстрация: http://jsbin.com/ezifi.

На что это похоже:

alt text

Просто примечание: я нахожу документацию на автозаполнении, чтобы быть довольно незрелой на данный момент. Я не нашел примеров, которые это сделали, и я не смог найти рабочее DOC, на котором были необходимы файлы .css, либо какие классы .css будут использоваться. Я узнал все это от проверки кода.

Другие советы

Я использую автозаполнение из Devbridge. http://www.devbridge.com/projects/autocomplete/jquery/

Это совпадает с начальными персонажами, только.

Что касается сопоставления на основе имени или фамилии, вам просто нужно предоставить список поиска с первой и фамилией.

Пример использования:

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

То lookup Вариант, который вы передаете для инициализации автозаполнения, могут быть списком или объектом. Вышеуказанное показало простой список. Если вы хотите, чтобы некоторые данные были прикреплены к предложениям, которые возвращаются, то сделайте lookup Вариант объекта, как это:

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

THX Чизо для IntryDucing JSBIN.com,

Я расширил свой код, чтобы поддерживать первые и фамилия совпадения.

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

Демо: http://jsbin.com/ufimu3/

Тип «И» или «Re»

Если вы хотите искать начало каждого слова в строке, более элегантное решение Henchman's - это сделать чированию, но просто используйте пограничный символ слова Regexp Специальный персонаж:

var matcher = new RegExp( "\\b" + re, "i" );

Пример: http://jsbin.com/utojoh/2. (попробуйте поискать «BL»)

Есть Еще один автозаполненный плагин jQuery что необязательно поиск только в начале каждого элемента (опция matchContains=false, Я думаю, что это тоже по умолчанию).

Учитывая отсутствие такого опции в плагине jQuery ui, я предполагаю, что вам нужно использовать другой плагин или переписать тот, который вы используете сейчас.

Где вы получаете данные, чтобы заполнить автозаполнение? Это из базы данных? Если это так, вы можете сделать то, что вы хотите в вашем запросе и только возвращать результаты, которые соответствуют началу каждого слова (первое / фамилия)

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow