需要选定值的 jquery 自动完成字段? [英] jquery autocomplete field that REQUIRES a selected value?

问题描述

我需要一些 jquery 插件，因为他们在大多数航班预订网站上使用它，您必须从组合列表中选择您的出发/到达机场.

我环顾四周，但我真的找不到任何好的解决方案.我需要一个自动完成组合框，它会保持打开状态，直到用户从可能值列表中选择一个项目，并且它必须支持一些将发送而不是文本的隐藏 id 号 - jquery 上的插件通常只发送文本值.

现在我使用 http://blog.idealmind.com.br/geral/simple-autocomplete-jquery-plugin/ - 但问题在于用户可以通过键盘输入不在列表中的任何内容.

有没有更好的插件可以使用?我本人并不是真正的 jquery 或 js 程序员...

解决方案

您在这里有两个不同的问题.

发送隐藏 ID 应使用源中具有值和标签属性的对象数组来完成.您需要使用选择和焦点选项来支持这一点.http://jqueryui.com/demos/autocomplete/#custom-data >

可以通过多种方式强制用户选择有效选项.如果用户输入无效选项然后离开输入框，我喜欢将输入框清空的想法.您可以使用更改"选项执行此操作.这也是 James 的代码所做的.

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

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.

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.

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.

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.

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

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.

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

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