在jquery自动完成中获取结果建议列表

时间:2011-10-30 14:05:17

标签: javascript jquery-plugins autocomplete

我正在使用jquery autocomplete plugin而我正在解决一些问题: 我有很多数据,当我输入数据时,会显示一个很长的建议列表,并且需要一个滚动条:

$("#txtName").autocomplete(data,
                                  { matchContains: true,
                                      minChars: 0,
                                      max: 3000,
                                      scroll: true,
                                      //scrollHeight: 180,
                                      width: 200
                                  });

但是,滚动条在IE中无法正常工作(这是一个已知的问题,我搜索了很多,但没有找到相关的解决方案)。

所以我决定阻止建议列表弹出窗口并将建议列表结果放到一个数组或类似的东西中,并在我的控件中显示它们。 我的问题是 - 我如何获得该清单?

提前致谢!

2 个答案:

答案 0 :(得分:1)

快速查看插件的API,我没有看到任何事件让您处理来自服务器回调的响应。您可能希望切换并使用official JQuery UI library来满足自动完成需求。有一个appendTo选项可能适合您的需要。

答案 1 :(得分:0)

我找到了答案(部分内容,我仍然需要处理它)。 我将首先发布代码,然后解释它:

$(function ()
{
    var names = [
        { label: 'Java', value: '1' },
        { label: 'C++', value: '2' },
        { label: 'C#', value: '3' },
        { label: 'Jquery', value: '4' },
        { label: 'Javascript', value: '5' },
        { label: 'ASP', value: '6' },
        { label: 'Pearl', value: '7' },
        { label: 'VB', value: '8' },
        { label: 'Ajax', value: '9' },
        { label: 'Json', value: '10' }];

    $("#txtName").autocomplete({
        minLength: 2,
        source: names,
        delay: 500
    }).data("autocomplete")._renderItem = function (ul, item)
    {
        //add data to my control, need to take care of earasing each time.
        var elOptNew = document.createElement('option');
        elOptNew.text = item.label;
        elOptNew.value = item.value;
        lst.add(elOptNew);

        //this code here adds the items to the popup thats built in.(it's written in jquery-ui.min.js)
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.label + "</a>")
            .appendTo(ul);
    };
});

HTML:

    <input id="txtName"/> 
    <select id="lst" size='10'></select>

添加的部分(_renderItem)每次都会添加一个项目,因此您可以对项目执行任何操作。我决定将它添加到列表中。

另一件事没有做的就是每次都删除列表。我仍然需要弄清楚如何做到这一点。