大选择列表选项?

时间:2012-02-28 20:36:12

标签: jquery html-select

我需要让用户在我们的地址数据库中选择他们的地址(我在当地政府机构),所以我可以获得他们的属性pin#。在过去,我们首先选择街道,然后选择方向,然后选择门牌号码来提示地址。这可以,但一如既往,我正在寻找一个更好的方法。我发现这个名为Chosen的cool jQuery plugin允许一个人开始输入,它会自动搜索并在列表中找到一些东西。我认为这对于某人搜索他们的地址来说是一个很好的方式,但正如你可以想象的那样,这个列表非常大,而且只是变大了。我真的不想通过互联网将整个列表发送到一个地址。

我想我需要像谷歌即时搜索那样提供网络服务返回数据。大约3个字符后,我给他们提供了一个列表。是否有任何jQuery(或其他类型)控件可以在您键入时轮询Web服务?

1 个答案:

答案 0 :(得分:4)

尝试jQueryUI autocomplete小部件。听起来就像你需要的那样。

以下是该网站的说明:

  

自动填充,添加到输入字段后,可以让用户快速完成   在键入的预先填充的值列表中查找并选择,   利用搜索和过滤。

     

通过提供自动填充字段焦点或在其中输入内容,   插件开始搜索匹配的条目并显示列表   值可供选择。通过输入更多字符,用户可以   过滤列表以更好地匹配。

     

这可用于输入先前选定的值,例如您   可以使用自动填充功能输入标签,完成地址,你   可以输入城市名称并获取邮政编码,也可以输入电子邮件   来自地址簿的地址。

     

您可以从本地和/或远程来源提取数据:本地是   适用于小型数据集(如50个条目的地址簿),   远程是大数据集所必需的,比如数百个数据库   或数以百万计的条目可供选择。

     

可以自定义自动完成功能以使用各种数据源   只需指定源选项。数据源可以是:

     
      
  • 包含本地数据的数组
  •   
  • 一个String,指定一个URL
  •   
  • a Callback
  •   
     

预期数据格式

     

来自本地数据,网址或回调的数据可以分为两部分   变体:

     
      
  • 一个字符串数组:[“Choice1”,“Choice2”]
  •   
  • 具有标签和值属性的对象数组:[{label:“Choice1”,value:“value1”},...]
  •   
     

标签属性显示在建议菜单中。价值会   在用户选择了某些内容后插入到input元素中   从菜单中。如果只指定了一个属性,则将使用它   两者,例如。如果您只提供value-properties,那么该值也将是   用作标签。

     

使用String时,Autocomplete插件需要该字符串   指向将返回JSON数据的URL资源。它可以在   相同的主机或不同的主机(必须提供JSONP)。自动填充   插件不会过滤结果,而是过滤请求参数   “term”被添加到URL,服务器端脚本应该使用该URL   用于过滤结果。数据本身可以采用相同的格式   作为上述本地数据。

     

第三种变体,即回调,提供了最大的灵活性   可用于将任何数据源连接到自动完成。回调   有两个参数:

     
      
  • 一个请求对象,具有一个名为“term”的属性,它引用文本输入中当前的值。例如,当   用户在城市字段中输入“new yo”,自动填充术语将为   等于“新哟”。
  •   
  • 响应回调,它要求单个参数包含要向用户建议的数据。应根据此数据过滤此数据   提供的术语,可以是上面描述的任何格式   简单的本地数据(String-Array或带有标签/值/两者的Object-Array   属性)。提供自定义源回调时很重要   在请求期间处理错误。您必须始终致电响应   即使遇到错误也会回调。这确保了小部件   总是有正确的状态。
  •   
     

如果您想要标签,则标签始终被视为文本   作为html处理,你可以使用ScottGonzález的html扩展名。演示   所有人都专注于源选项的不同变体 - 寻找   一个与您的用例匹配的,并查看代码。