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

在select或enter上获取jquery自动完成建议列表

2 个答案: