如何制作下拉列表？谷歌搜索示例答案

【问题标题】：How to make a drop-down list? Example Search of Google如何制作下拉列表？谷歌搜索示例
【发布时间】：2012-11-15 14:56:45
【问题描述】：

index.php

<html>
<head>
    <title>ы</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.autocomplete.js"></script>
</head>
<body>
<script type="text/javascript">
    $(document).ready(function(){
        $("#search").keyup(function(){
          $("#search").autocomplete("json.php", {
            delay:10,
            minChars:4,
            maxItemsToShow:3
            }
          );
          }); });
      //?word=" + $("#search-text").val()
</script>
<form action=""><input type="search" id="search"> <input type="submit"></form>
<body>
</html>

json.php

<?php
echo json_decode($_GET['q']);

如何使这段代码工作？如何使用文件 json？在 php 中如何处理请求并将结果返回给自动完成？也许有更好的解决方案？官方文档不包含服务端代码示例！

看起来响应 200ok。没有人。回声 json_decode ($ _GET ['q']);这里出错了，问题出在哪里？

【问题讨论】：

标签： php javascript jquery ajax autocomplete

【解决方案1】：

为什么要使用 php 进行自动完成？使用js比每次击键后重复请求更方便吗？

您可以尝试任何方式

<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>

在体内

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


</body>

【讨论】：

我需要从数据库中获取数据/

【解决方案2】：

您可以使用这些方法来填充您的 items 数组，然后检查字段中的值是否与其中任何一个匹配。

$q = strtolower($_GET["q"]);
if (!$q) return;

/* Connect to database */

/* Query Database */

$items = array();

/* Loop through results and add them to items array */

while ($row = mysqli_fetch_assoc($result)) {
    $items[$row['name']] = $row['value'];
}

foreach ($items as $key=>$value) {
    if (strpos(strtolower($key), $q) !== false) {
        echo "$key|$value\n";
    }
}

搜索代码（不含数据库查询位）记录在 http://jquery.bassistance.de/autocomplete/demo/

这当然会在每次有人在输入字段中键入字母时生成数组，因此非常耗费服务器。

如上所述，一个更好的方法是使用 availableTags 变量并在加载时通过 PHP 将它们加载到 javascript 变量中。我建议为此使用 PHP json_encode 函数。

【讨论】：

【解决方案3】：

$(function() {
    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://sitetesting.kiev.ua/ajax.php",
                dataType: "jsonp",
                data: {
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.countryName
                        }
                    }));
                }
            });
        },
        minLength: 2
    });
});

【讨论】：