简体   繁体   English

过滤jqueryUI自动完成选项

[英]filtering jqueryUI autocomplete options

I'm using the jqueryUI autocomplete widget on my site. 我在我的网站上使用jqueryUI自动完成小部件。 Say i have the following items in my database... 说我的数据库中有以下项目...

  • apple 苹果
  • ape
  • abraham 亚伯拉罕
  • aardvark 土豚

When I type "a" in the autocomplete widget i get that list below my input field. 当我在自动完成小部件中键入“a”时,我会在输入字段下面找到该列表。 I've written additional code such that when you select an item it is added to a UL below the input field and the input field is cleared. 我已经编写了额外的代码,当您选择一个项目时,它会被添加到输入字段下面的UL中,并且输入字段将被清除。

So, you type "a", you see that list, and you select apple. 因此,您键入“a”,您会看到该列表,然后选择apple。 Apple is now an LI in the UL below the input field. Apple现在是UL中输入字段以下的LI。 You now type "a" again, and you see the list again... Here's my problem. 你现在再次输入“a”,然后再次看到列表......这是我的问题。

This second time I want to show everything EXCEPT apple. 这第二次我想展示苹果之外的一切。

I'd love to know how to do this in two different places: 我想知道如何在两个不同的地方做到这一点:

1 - i'd love to know how to intercept the event that fires a GET query to the server, so that instead of sending "q=a" to the server when you type "a", i could make it send "q=a&exclude=apple,foo,bar". 1 - 我想知道如何拦截向服务器发出GET查询的事件,这样当你输入“a”时,我可以让它发送“q = a”而不是向服务器发送“q = a”一个&排除=苹果,FOO,栏”。 Then I filter the list server side and everything's good. 然后我过滤列表服务器端,一切都很好。

2 - I'd also love to know how to intercept the event that builds the list of options. 2 - 我也很想知道如何拦截构建选项列表的事件。 That way, I could see that it's about to display the options "apple, ape, etc" and I could snip "apple" out of that list. 这样,我可以看到它将显示选项“apple,ape等”,我可以从该列表中删除“apple”。

I see the events in the docs - but I'm not sure how to use them to accomplish the goals stated above. 我看到了文档中的事件 - 但我不确定如何使用它们来实现上述目标。

Thanks! 谢谢!

You can accomplish both of these by defining a function for the source option of the autocomplete widget. 您可以通过为自动完成窗口小部件的source选项定义函数来完成这两项操作。 From there, you'd perform the AJAX request yourself with $.ajax . 从那里,您将使用$.ajax自己执行AJAX请求。 Something like: 就像是:

$("input").autocomplete({
    source: function (request, response) {
        var exclude = /* build excluded items list. */;
        var term = request.term;

        $.ajax({
            url: "server.php",
            data: { q: term, exclude: exclude },
            dataType: "json",
            success: function(data) {
                /* Here, you could accomplish #2 by filtering items out of data */
                /* You must call the supplied callback to let the widget know what to suggest */
                response(data);
            }
        });

    }
});

I would imagine you would build the excluded items just by extracting the items already in the ul . 我想你只是通过提取ul已有的项目来构建被排除的项目。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM