将输入值动态插入jQuery自动完成列表

时间:2012-01-18 04:54:16

标签: jquery jquery-autocomplete

鉴于简单的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 个答案:

答案 0 :(得分:1)

$(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);
        }       
    });
});

答案 1 :(得分:0)

我会尝试这样的事情:

  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 
    });
});

总体上最好的选择是使用动态功能不断指定自动完成菜单中显示的内容。