2自动完成/建议输入框使用jQuery或Ajax,第二个框基于第一个选项和多个项目

我尝试了很多jquery和ajax自动完成脚本。 我发现很难尝试将它们中的任何一个整合到我需要的东西中。

让我解释一下我想要实现的目标。

我需要2个自动完成框。 第二个从第一个数据中提取数据。 他们也必须支持多个条目。 查询数据库的数据库。 我现在使用本地数据,但将来可以改变它。

我们将以州和市为例。

我有一个mysql数据库,它包含: – id,state,city。 我使用JSON格式来提取结果。

因此,如果我们在第一个框中选择2个状态。 我在西class牙,所以马拉加和加迪斯说。 然后在City的第二个自动完成框中,不是查询我所有城市的数据库,而是仅为马拉加和加的斯的城市提供结果。

我用过的所有剧本似乎都没有为我提供足够详细的解释来实现这一目标。 我对PHP非常熟悉,但在JS-jQuery / JSON / Ajax方面却是一个完整的菜鸟。 我取得了进展,我可以让第一个自动完成框工作并拉动2个状态,但之后我似乎无法做任何头脑。

我目前使用的脚本是Drew Wilsons Auto建议的。 http://code.drewwilson.com/entry/autosuggest-jquery-plugin

如果我想要实现的目标可以用这个脚本完成。 我也对其他建议脚本或想法持开放态度。

这是我的PHP脚本中的一些代码。 (p3.php)我不需要这样做,因为我似乎陷入了某个地方。 它确实选择了多个国家! 至少是一个好的开始。

 

HTML代码。

 
jQuery(function(){ jQuery( "#province" ).autoSuggest("p3.php", {selectedItemProp: "province", selectedValuesProp: "province", searchObjProps: "province", queryParam: "plkup", minChars: 1, matchCase: false}); }); // Below does not work. Again I am probably going around this wrong way. jQuery(function(){ jQuery( "#city" ).autoSuggest("p3.php", {selectedItemProp: "city", selectedValuesProp: "city", searchObjProps: "city", minChars: 1, queryParam: "clkup", matchCase: false}); });

我真的不知道如何通过第一个中选择的状态来获取第二个自动对话框来从db过滤中获取数据。 任何想法或解决方案或想法将不胜感激。

非常感谢马克。

这是一个非常简单的程序。 我将展示主要的骨架。 添加闪存肉将是你的一部分。

假设我们在ajax.php有两个 ,如下所示:

    

那么我们需要什么呢? 我们需要填充事件的第二个

这里是javascript部分(ajax.php)


  

这会将请求发送到process.php

现在是process.php


这里我们需要数据来填充第二个

现在里面有什么?

你需要输出这样的东西:

      

价值和内部文字填满了您的需求。

因为它来自datanbase:

  • 您可以使用$_GET['parentValue']获取process.php的父选择值
  • 使用该值,查询数据库
  • 然后从数据库返回的结果中,使用whileforeachfor循环(取决于你正在检索它的方式),使
  • 你完成了!

对于多选

为了让生活更轻松,您可以使用选择的多选

一个建议

不推荐使用mysql_* 。 请改用PDO。 这是教程的链接