javascript - 在选择或输入时获取jquery自动完成建议列表

Question

我正在寻找自定义 jQuery 自动完成小部件的帮助。我在一些大数组上使用自动完成功能，并在建议中显示了一些结果。当用户点击回车（或选择一个值，回车也很好）时，我想将建议列表放入一个数组中，以便我可以在其他地方显示它们。

这非常接近我想要的，我将继续使用它并希望自己解决这个问题：

HTML

<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>

JS

$('input').autocomplete({
    search: function(event, ui) {
        $('.test ul').empty();
    },
    source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {

    return $('<li/>')
   .data('item.autocomplete', item)
   .append(item.value)
   .appendTo($('.test ul'));
};

http://jsfiddle.net/uMqyn/1/

谢谢！

Answer 1

这可能会让您入门 - FIDDLE。

使用“响应”函数提取返回的变量，ui.content[n].value然后将它们放在您希望的位置。

JS

$('.autocomp').autocomplete({
    autoFocus : true,
    source : areas,
    selectFirst : true,
    response: function( event, ui ) { 
        for(var n=0; n<5; n++)
        {
         $('.test').append( ui.content[n].value + '<br />' );
         console.log( ui.content[n].value );
        }
    }
});

Answer 2

想出了这个：

http://jsfiddle.net/uMqyn/565/

var areas = ['california', 'nevada', 'oregon', 'utah', 'arizona', 'new mexico', 'minnesota', 'texas', 'louisiana', 'alabama', 'mississippi', 'oklahoma', 'washington'];

var foo;
$('.autocomp').autocomplete({
    minLength: 1,
    source: areas,
    delay: 0,
    response: function (event, ui) {
        foo = ui.content;
    }
});

$(".autocomp").keypress(function (e) {
    if (!e) e = window.event;
    if (e.keyCode == '13') {
        $('.autocomp').autocomplete('close');
        if (foo.length) {
            $(".test").empty();
            for (var i = 0; i < foo.length; i++) {
                $(".test").append(foo[i].value + '<br>');
            }
        }
        return false;
    }
});