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

Posted 2023-05-09

技术标签:

【中文标题】如何自定义返回的 jQuery UI 自动完成列表【英文标题】：How to customise returned list of jQuery UI autocomplete 【发布时间】：2012-05-27 00:52:39 【问题描述】：

我有一个要求，我必须实现自动完成，但我不确定我是否可以在 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 自动完成中是否可行？

【问题讨论】：

【参考方案1】：

是的，听起来您需要简单地询问正在引用哪个选项，然后使用 .next() 或 .prev() jquery 函数。这些是相对的迭代工具（一个前向，一个后向），只要有一点技巧，就可以满足您的需求。这是简单的 jquery，因此您需要将其构建到您的侦听器中（在这种情况下为击键）

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

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

【讨论】：

你的意思是我可以在 jQuery UI 自动完成中做到这一点？还是我应该建立自己的图书馆？两者都不 - 您需要自定义/覆盖 select 和/或“焦点”以及可能一两个其他事件（在您调试时） - 您应该能够在不报废的情况下做到这一点否则使用

以上是关于如何自定义返回的 jQuery UI 自动完成列表的主要内容，如果未能解决你的问题，请参考以下文章

jQuery UI 自动完成：你如何启动一个异步进程并在它完成之前退出它

jQuery UI 实例 - 自动完成（Autocomplete）