Question

我目前正在使用JQuery UI扩展来进行搜索自动完成。但是，我需要能够将匹配列表限制为10.此外，我还需要在底部有一个按钮，以显示下一个10（假设）匹配。到目前为止，我将此作为我的代码：

<script>
    $(document).ready(function() {
        var termTemplate = "<span class='ui-autocomplete-term'>%s</span>";

        $('input#autocomplete').autocomplete({
            source: ['johannesburg z', 'johannesburg x', 'johannesburg v','johannesburg b','johannesburg a','johannesburg q', 'johannesburg u', 'johannesburg y', 'johannesburg o', 'johannesburg p'],
            minLength: 3,
            open: function(e,ui) {

                var
                    acData = $(this).data('autocomplete'),
                    styledTerm = termTemplate.replace('%s', acData.term);

                acData
                    .menu
                    .element
                    .find('a')
                    .each(function() {
                        var me = $(this);
                        me.html( me.text().replace(acData.term, styledTerm) );
                    });

            }
        });
    });  
</script>

和HTML

<body>
    <input id="autocomplete" />
    <input type="button" class="hello" />
</body

我已经检查了类似的解决方案，但似乎没有任何工作。

Answer 1

我会处理这个服务器端的大部分内容。

例如，让服务器将结果限制为10，然后通过JSON将其输出到客户端。

关于滚动到下一个结果列表的按钮，您需要实现一些模仿分页形式的东西。自动完成下拉列表应保留结果的偏移量。最初，限制显然为10，偏移量为0（结果开始，具体取决于您在输出中的排序方式）。该按钮需要在单击时从服务器请求更多结果，并最终传入另一个GET变量（以及term），它将代表结果的偏移量。

你如何实现这一点取决于你，我之前没有这样做过，所以我不能只给你一些示例代码，但jQuery UI为你提供了足够的框架来完成这个并基于我的方法，这应该不会太难。

Answer 2

不是你的确切答案但是去吧

$( ".selector" ).autocomplete({ minLength: 5 });

来自网站

最小字符数a 用户必须在之前输入自动填充功能激活。 零很有用只需几个项目的本地数据。 当有一个 应该增加 很多项目，单个字符将匹配几千件物品。

http://jqueryui.com/demos/autocomplete/#option-minLength

如何使用Jquery UI自动完成限制搜索匹配的数量？

2 个答案: