如何自定义返回的jQuery UI自动完成列表

Question

我有一个必须实现自动完成的要求，但是我不确定是否可以在jQuery UI自动完成中实现。 如果我无法在jQuery UI自动完成功能中执行此操作，那么您可以建议可以执行此操作的库，还是应该构建自己的库？

要求是当用户键入文本框提示可能的结果时，我有一个列表只是普通的javascript排序数组。 当用户单击结果时，列表应更改为在单击的结果上方显示3个结果，在单击的结果下方显示3个结果。

这是我想做的代码。

    $(function() {
        var projects = [
            "List1","List2","List3","List4","List5","List6","List7","List8"
        ];

        $( "#project" ).autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "
" )
                .data( "item.autocomplete", item )
                .append( "" + item.label + "" )
                .appendTo( ul );
        };
    });

例如，如果用户键入“ Li”，则应弹出“ List1”，“ List2”，“ List3”，“ List4”，“ List5”。 用户单击“ List3”后，结果列表应更改为“ List1”，“ List2”，“ List3”，“ List4”，“ List5”，“ List6”，并忽略“ List7”，“ List8”

在jQuery UI Autocomplete中甚至有可能吗？

Answer 1

是的，听起来您只需要询问所引用的选项，然后使用.next（）或.prev（）jquery函数即可。 这些是相对的迭代工具（一个向前，一个向后），需要一点技巧即可完成您想要的。 这是简单的jquery，因此您需要将其构建到您的侦听器中（本例中为击键）

下一个： http : //api.jquery.com/next/

上一个： http : //api.jquery.com/prev/