一个需要选择的值jquery的自动完成场？ [英] jquery autocomplete field that REQUIRES a selected value?

问题描述

我需要一些jQuery插件，因为他们使用它，你必须从combolist选择你的出发/到达机场航班大部分预订网站。

I need some jquery plugin as they use it on most flight booking sites where you have to choose your departure/arrival airport from a combolist.

我看看四周，但我真的不能找到任何好的解决方案。我需要一个自动完成组合框，直到用户从可能值的列表中选择一个项目，将继续开放，而且必须支持将要发送的而不是文字一些隐藏的ID号 - 上的jQuery插件通常只能发送文本价值。

i had a look around, but i could not really find any good solution. I need a autocomplete combobox that will stay open until the user chooses a item from a list of possible values, and it must support some hidden id numbers that will be send instead of the text - the plugins on jquery usually only send the text-value.

现在，我使用 http://blog.idealmind.com .BR /热拉尔/简单自动完成，jQuery的，插件/ - 但这样做的问题是，用户可以输入任何不通过键盘就行了。

Right now i use http://blog.idealmind.com.br/geral/simple-autocomplete-jquery-plugin/ - but the issue with this is that user can enter anything that is not on the list via keyboard.

是否有更好的插件，在那里我可以使用？我不是一个真正多一个jQuery或JS程序员自己...

Are there a better plugins out there i could use? i'm not really much of a jquery or js programmer myself...

推荐答案

您这里有两个不同的问题。

You have two different questions here.

发送隐藏的ID应该用在你的源代码都值和标签属性对象的数组来完成。你需要使用select和重点选项来支持这一点。 http://jqueryui.com/demos/autocomplete/#custom-data

Sending hidden IDs should be done using an array of objects with both a value and label attribute in your source. You'll need to use the select and focus options to support this. http://jqueryui.com/demos/autocomplete/#custom-data

强制用户选择一个有效的选项可以做的一些方法。我喜欢在一个无效的选项消隐如果用户键入的输入框的想法，然后离开框。您可以使用更改选项做到这一点。这就是詹姆斯code也会做。

Forcing the user to select a valid option could be done a few ways. I like the idea of blanking the input box if the user types in an invalid option and then leaves the box. You can do this using the "change" option. This is what James' code does too.

下面是具有两个功能的工作示例：
http://jsfiddle.net/vZeHr/4/

Here is a working example with both features: http://jsfiddle.net/vZeHr/4/

这篇关于一个需要选择的值jquery的自动完成场？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！