1

我正在寻找实时搜索解决方案或使用 ajax 从文件中获取数据的 jquery 自动完成功能（稍后从 db 中获取）

假设我有这个带有数据的 php 文件：

[ 
 {ID: "1", "Name": "User 1"}, 
 {ID: "2", "Name": "User 2"},  
 {ID: "3", "Name": "User 3"}, 
 {ID: "4", "Name": "User 4"}
]

我在网上发现这个代码可以工作，但它只扫描维基百科，我该怎么做才能扫描我的 php 文件？http://jsfiddle.net/TzQJP/

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>Comperio Super Simple Instant Search</title>
  </head>
  <body>
    <h1>Search Wikipedia!</h1>
    <br />
    <input id="searchterm" />
    <button id="search">search</button>
    <div id="results"></div>
    <script>
      $("#searchterm").keyup(function(e){
        var q = $("#searchterm").val();
        $.getJSON("http://en.wikipedia.org/w/api.php?callback=?",
        {
          srsearch: q,
          action: "query",
          list: "search",
          format: "json"
        },
        function(data) {
          $("#results").empty();
          $("#results").append("<p>Results for <b>" + q + "</b></p>");
          $.each(data.query.search, function(i,item){
            $("#results").append("<div><a href='http://en.wikipedia.org/wiki/" + encodeURIComponent(item.title) + "'>" + item.title + "</a><br>" + item.snippet + "<br><br></div>");
          });
        });
      });
    </script>
    <div style="position:absolute;bottom:0;right:0;text-align:right">
      <a href="http://blog.comperiosearch.com/author/fmcdowall/">Fergus McDowall</a> 2012<br>
      <br>
    </div>
  </body>
</html>
4

2 回答 2

1

为什么不使用：http: //jqueryui.com/autocomplete/

来自同一网站的示例：

$(function() {
 var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C"
 ];
 $( "#tags" ).autocomplete({
   source: availableTags //OR path to your PHP script
 });
});

并且您可以在返回的源代码中有指向您的 PHP 脚本的路径，而不是 availableTags

echo json_encode($array_of_items);

如果您仍然想使用您提供的代码，请确保您echo json_encode($array);在 PHP 脚本上使用，因为响应 ajax 期望的类型应该是json

于 2013-03-25T17:08:37.637 回答
1

通过更改"http://en.wikipedia.org/w/api.php?callback=?"您的 PHP 文件路径的路径，您可以完成它。确保您的 JSON 结果格式正确且有效。

不要只从互联网上获取代码片段并使用它。至少了解它的作用。它可以帮助您根据需要扩展代码。

于 2013-03-25T16:56:38.837 回答