Конфигурация за търсене на джаджа за jQuery UI Autocomplete

В jQuery UI v1.8rc3 приспособлението за автоматично довършване приема source опция, която може да бъде или низ, масив или функция за обратно извикване. Ако това е низ, автоматичното довършване прави GET на този URL адрес, за да получи опции/предложения. Ако масив, автоматичното довършване извършва търсене, както посочихте, за наличието на въведените знаци на която и да е позиция в термините на масива. Крайният вариант е това, което искате - функцията за обратно извикване.

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

Третият вариант, обратното извикване, осигурява най-голяма гъвкавост и може да се използва за свързване на всеки източник на данни към Autocomplete. Обратното извикване получава два аргумента:

• Обект request с едно свойство, наречено term, което се отнася до стойността, която текущо се въвежда. Например, когато потребителят въведе ново йо в поле за град, което е настроено да извършва автоматично довършване, 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() просто извиква предоставената функция за всеки член в предоставения масив. Функцията в този случай просто използва регулярния израз, за ​​да види дали терминът в масива съвпада с въведеното.
• накрая, responseFn() се извиква с резултата от търсенето.

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

как изглежда:

Само бележка: намирам документацията за автоматично довършване за доста незряла на този етап. Не намерих примери, които правеха това, и не можах да намеря работен документ, в който .css файловете са необходими или кои .css класове ще бъдат използвани. Научих всичко това от проверката на кода.

Вижте също, как мога да форматирам по избор Резултати от приставката за автоматично довършване?

thx cheeso за въвеждането на 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/

въведете 'an' или 're'

Използвам автоматичното довършване от 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, ]
};

Ако искате да търсите в началото на всяка дума в низа, по-елегантно решение за henchman's е да вземете cheeso's, но просто да използвате специалния знак за границата на думата на regexp:

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

Пример: http://jsbin.com/utojoh/2 (опитайте да потърсите „bl“)

Има друга добавка за автоматично довършване на jQuery, която по избор търси точно в началото на всеки елемент ( опцията е matchContains=false, мисля, че това също е по подразбиране).

Като се има предвид липсата на такава опция в плъгина на jQuery UI, предполагам, че ще трябва или да използвате различен плъгин, или да пренапишете този, който използвате сега.

Откъде получавате данните за попълване на автоматичното довършване? От база данни ли е? Ако е така, можете да направите каквото искате в заявката си и да върнете само резултати, които съответстват на началото на всяка дума (собствено/фамилно име)