jQuery UI Конфигурация поиска виджета Autocomplete

Question

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

В конечном счете было бы еще лучше, чтобы match by beginning of first or last name, как в Gmail.

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

Answer 1

В JQuery UI v1.8rc3, the autocomplete widget принимает source вариант, который может быть либо строка, массив или функция обратного вызова. Если это строка, автозаполнение делает GET на этом URL, чтобы получить параметры/предложения. Если массив, автозаполнение выполняет поиск, как вы указали, для наличия типизированных символов в любой позиции в терминах массива. Окончательный вариант - это то, что вы хотите - функция обратного вызова.

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

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

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

Пример кода:

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(). Он задает регулярное выражение, начинающееся с^(Circumflex), что подразумевает, что оно будет соответствовать только тогда, когда типизированные символы появятся в начале члена в массиве, чего вы хотели. Он также использует опцию «i», которая подразумевает нечувствительность к регистру.
• утилита $.grep() просто вызывает предоставленную функцию на каждом члене предоставленного массива. Функция в этом случае просто использует regexp, чтобы увидеть, соответствует ли член в массиве для того, что было напечатано.
• Наконец, responseFn() вызывается с результатом поиска.

работает демо: http://jsbin.com/ezifi

что это выглядит следующим образом:

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

Смотрите также how can I custom-format the Autocomplete plug-in results?

Answer 2

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

Он соответствует только начальным символам.

alt text http://i46.tinypic.com/2ihq7pd.jpg

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

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

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, ] 
}; 

Answer 3

Там же another jQuery autocomplete plug-in, что, возможно поиск только в начале каждого элемента (опция matchContains=false, я думаю, что это тоже по умолчанию).

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

Answer 4

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

Answer 5

ТНХ cheeso для intrducing jsbin.com,

я продлил свой код для поддержки первого и LastName матчей тоже.

$("#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/

типа «» или «ре»

Answer 6

Если вы хотите найти начало каждого слова в строке, более элегантное решение ставленник является принять cheeso-х но только использовать регулярное выражение границы слова особый характер:

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

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