Динамическая вставка входного значения в список автозаполнения jQuery - PullRequest
0 голосов
/ 18 января 2012

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

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliet", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"]
    });
});

Например, если пользователь введет «Alph», автозаполнение вернет:

  • Alph
  • Альфа

С "Alpha", исходящим из источника автозаполнения, и "Alph", динамически вставляемым.

Я ценю любую помощь, поскольку я очень плохо знаком с jQuery и в настоящее время изучаю кривую обучения.

Ответы [ 2 ]

1 голос
/ 18 января 2012
$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: function(request, response){
            var options = ["Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliet", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"];
            var results = [request.term];
            var regex = new RegExp(request.term, "i");
            for(var i = 0; i< options.length; i++){
                if (options[i].match(regex))
                    results.push(options[i]);
            }
            response(results);
        }       
    });
});
0 голосов
/ 18 января 2012

Я бы попробовал что-то вроде этого:

  var options = [request.term, "Alpha", "Bravo", "Charlie", "Delta", "Echo", "Foxtrot", "Golf", "Hotel", "India", "Juliet", "Kilo", "Lima", "Mike", "November", "Oscar", "Papa", "Quebec", "Romeo", "Sierra", "Tango", "Uniform", "Victor", "Whiskey", "X-ray", "Yankee", "Zulu"];

function source_function(request, response) {
  // make a new array with the dynamic term + all of your other options
  var autoOptions = [request.term].concat[options];
/*
   Your code to prune the options
 */
  // function to pass the displayed options back to
  response(options);
}

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source_function 
    });
});

В общем, лучший вариант - использовать динамическую функцию для постоянного указания того, что появляется в меню автозаполнения.

...