0

多くの jquery および ajax オートコンプリート スクリプトを試しました。それらのいずれかを必要なものに統合しようとするのは非常に難しいと感じています。

私が達成しようとしていることを説明しましょう。

オートコンプリート ボックスが 2 つ必要です。2 番目は 1 番目からデータをプルします。また、両方とも複数のエントリをサポートする必要があります。DB にデータを照会します。今のところローカル データを使用していますが、将来変更する可能性があります。

State と City を例として使用します。

私は mysql DB を持っており、それには以下が含まれます:-id、state、city。JSON 形式を使用して結果を取得していました。

したがって、最初のボックスで 2 つの州を選択するとします。私はスペインにいるので、マラガとカディスと言います。次に、City の 2 番目のオートコンプリート ボックスで、DB にすべての Cities を照会する代わりに、マラガとカディスの Cities のみの結果のみを返します。

私が使用したスクリプトには、これを達成するのに十分な詳細な説明がないようです。私は PHP に精通していますが、JS-jQuery/JSON/Ajax に関してはまったくの初心者です。最初のオートコンプリート ボックスを機能させて 2 つの状態をプルできる程度まで進歩しましたが、その後は前進できないようです。

私が現在使用していたスクリプトは、Drew Wilson の自動提案でした。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>

最初に選択した状態だけでデータベースフィルタリングからデータを取得するために2番目のオートコンプリートボックスを取得する方法が本当にわかりません。どんなアイデアや解決策、考えも大歓迎です。

マークに感謝します。

4

1 に答える 1

1

これは非常に簡単な手順です。主な骨組みだけ紹介します。フラッシュミートの追加はあなたの責任です。

<select>次のように 2 つあるとしajax.phpます。

   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

それで、何が必要ですか？<select>その選択の 2 番目の on イベントを設定する必要があります。

ここにjavascript部分（ajax.php）があります

<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

これにより、リクエストが送信されますprocess.php

今来るprocess.php

ここでは、2 番目に入力するデータが必要です。<select>

中身は<select>？

<option value="someValue">someText</option>

次のようなものを出力する必要があります。

    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

値と内部のテキストは、ニーズを満たします。

それはデータベースから来るので：

  • で親選択値を取得できprocess.phpます$_GET['parentValue']
  • その値を使用して、データベースにクエリを実行します
  • 次に、データベースから返された結果から、 loop を使用するwhileかforeach、for(取得方法に応じて) を作成し <option value="someValue">someText</option>ます。
  • あなたは終わった！

複数選択の場合

生活を少し楽にするために、選択した複数選択を使用できます

アドバイス

mysql_*廃止されました。代わりに PDO を使用してください。ここにチュートリアルへのリンクがあります

于 2012-11-14T14:35:23.647 に答える