2 Ячейки ввода автозаполнения / предложения с использованием jQuery или Ajax со вторым ящиком на основе первых выборок с несколькими элементами

Я попробовал много сценариев jquery и ajax auto complete. Мне очень сложно попытаться интегрировать любой из них в то, что мне нужно.

Позвольте мне объяснить, чего я пытаюсь достичь.

Мне нужно 2 автозаполнения. Второй извлекает данные из первого. Также они должны поддерживать несколько записей. Запрос базы данных для данных. Сейчас я использую локальные данные, но могу изменить это в будущем.

В качестве примеров мы будем использовать государство и город.

У меня есть mysql DB, и он содержит: – id, state, city. Я использовал формат JSON для достижения результатов.

Поэтому, если в первом поле выбрать 2 состояния. Я в Испании, так говорят Малага и Кадис. Затем во втором поле автозаполнения для Сити вместо запроса моей БД для всех городов это дает только результаты для городов в Малаге и Кадисе.

Ни один из сценариев, которые я использовал, по-видимому, не имеет достаточно подробных объяснений для меня, чтобы достичь этого. Я хорошо знаком с PHP, но полный noob, когда речь заходит о JS-jQuery / JSON / Ajax. Я добился прогресса в той мере, в какой я могу получить первый блок автозаполнения, который работает и вытягивает 2 состояния, но после этого я не могу показаться, что это не так.

В сценарии, который я использовал, был предложен Drew Wilsons Auto. http://code.drewwilson.com/entry/autosuggest-jquery-plugin

Если то, что я пытаюсь достичь, можно сделать с помощью этого сценария. Я также открыт для других предложений сценариев или идей.

Вот некоторые из кода моего php-скрипта. (p3.php) Это не работает, как мне это нужно, поскольку я, кажется, где-то застрял. Однако он выбирает несколько государств! По крайней мере, хорошее начало.

<?php // DB connection details (removed from here) //DB Connection $dblink_main = mysql_connect($host_main,$user_main,$pass_main); $selectdb_main=mysql_select_db($database_main,$dblink_main); // changed default q in autosuggest.php! $input = $_GET["plkup"]; //$input2 = $_GET["clkup"]; //$province2 = $_GET["province2"]; //$province = 'Cadiz'; //$province2 = "Cadiz"; $data = array(); // query your DataBase here looking for a match $query = mysql_query("SELECT distinct province FROM spanish_regions WHERE province LIKE '%$input%'"); // query 2 - doing this wrong! //$query2 = mysql_query("SELECT city, province FROM spanish_regions WHERE province LIKE '%$input2%'"); while ($row = mysql_fetch_assoc($query)) { $json = array(); $json['province'] = $row['province']; $data[] = $json; } //while ($row = mysql_fetch_assoc($query2)) { //$json = array(); //$json['city'] = $row['city']; //$data[] = $json; //} header("Content-type: application/json"); echo json_encode($data); ?> 

HTML-код.

 <form action=""> <label>Province: </label><input type="text" id="province" name="" size="20" value="" autocomplete="off" /> </form> <form action=""> <label>City: </label><input type="text" id="city" name="" size="20" value="" autocomplete="off" /> </form> <script language="javascript" type="text/javascript"> 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}); }); </script> 

Я действительно не уверен, как перейти ко второму полю автозаполнения, чтобы получить данные от фильтрации db только состояниями, выбранными в первом. Любые идеи или решения или мысли будут высоко оценены.

Большое спасибо Марку.