显示来自 MySQL 的数据的 jQuery 下拉菜单答案

【问题标题】：jQuery Dropdown menu displaying data from MySQL显示来自 MySQL 的数据的 jQuery 下拉菜单
【发布时间】：2012-04-24 16:21:01
【问题描述】：

我正在尝试在我的网站上开发一项功能，该功能可以自动从我的表格中获取可用的路线并将它们填充到 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 数据

我的问题是，我怎样才能让这两个玩得很好？

【问题讨论】：

worked fine on its own, without the php data .. ??它从服务器获取 json 格式的数据
你想要一个选择框还是一个带有自动完成功能的文本框？
我想要两者兼得。在你说我疯了之前听我说完。我希望用户能够在键入时选择选项，创建选项的唯一方法是使用 select（我知道），让用户能够键入的唯一方法是提供一个文本框（我知道的）
发布一个已经在网络上可用的示例，以便我们更好地了解您的实际需求
webjet.com 有一项功能，允许用户输入位置，并且文本框会在用户输入时显示位置列表

标签： php jquery mysql menu drop-down-menu

【解决方案1】：

您可能想尝试使用 Jquery UI 的自动完成插件。

<?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>

我认为在这种情况下，您将不再使用选择标签，而是使用输入标签。希望对你有帮助。

谢谢，戴夫

【讨论】：

我以前用过这个插件，效果很好。生病测试它并回复你
为什么要在文本框上方打印查询？

【解决方案2】：

<?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>

注意：只是我脑子里写的，可能需要自定义。

编辑：在您的 HTML 中，您需要一个 ID 为 combobox 的 input 元素。

【讨论】：