0

私は自分のWebサイトで、テーブルから利用可能なルートを自動的に取得し、入力時に結果を表示するjQueryオートコンプリートテキストボックスにそれらを入力する機能を開発しようとしています。

私はなんとかクエリをまとめることができました、そしてそれは完璧に機能します...しかしそれにjQueryが追加されていません

ここにそれ自体のコードがあります

<?PHP  
mysql_connect('localhost', 'sample', 'sample'); 
mysql_select_db('winning'); 
$sql = "SELECT distinct rout_to FROM search_v ORDER BY rout_to ASC" ; 
$result = mysql_query($sql); 
echo '<div class="ui-widget"><select id="combobox" name="arrival_label">'; 
while ($row = mysql_fetch_array($result)) echo "<option value='" . $row['rout_to'] . "'>" . $row['rout_to'] . "</option>"; 

echo "</select></div>"; ?>

jquery uiライブラリのオートコンプリートコンボボックスをテストしたところ、phpデータがなくても、それ自体で正常に機能しました。

私の質問は、どうすればこれら2つを上手くプレイできるかということでした。

4

2 に答える 2

0 
<?php
    $autocomplete = array();
    mysql_connect('localhost', 'sample', 'sample'); 
    mysql_select_db('winning');
    $sql = mysql_query('SELECT distinct rout_to FROM search_v ORDER BY rout_to ASC');
    $r = $db->query($q);
    while ($row = mysql_fetch_array($result))
      $autocomplete[] = $row['rout_to'];
    }
?>
<script type="text/javascript">
  $(function() {
    var availableItems = [ <?php print '"'.implode('","', $autocomplete).'"'; ?> ];
    $("#combobox").autocomplete({
      source: availableItems,
      minLength: 3
    });
  });
</script>

注：頭から書き留めただけで、カスタマイズが必要になる場合があります。

input編集：HTMLには、IDを持つ要素が必要ですcombobox。

于 2012-04-12T10:27:37.670 に答える
0

JqueryUIのオートコンプリートプラグインを試してみたいと思うかもしれません。

<?php
    $autocomplete = array();
    mysql_connect('localhost', 'sample', 'sample'); 
    mysql_select_db('winning');
    $sql = mysql_query('SELECT distinct rout_to FROM search_v ORDER BY rout_to ASC');
    $r = $db->query($q);
    while ($row = mysql_fetch_array($result))
      $autocomplete[] = $row['rout_to'];
    }
?>
<script>
    $(function() {
        var availableTags = [
          <?php foreach($autocomplete as $a){
              echo '"'.$a.'",';
          }?>
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
</script>

HTMLコード：

<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>

この場合、selectタグではなくinputタグを使用することになります。お役に立てば幸いです。

ありがとう、デイブ

于 2012-04-12T10:38:56.610 に答える