使用json的jquery自动完成

我尝试了很多东西，但我不明白这太令人困惑了

我有这个

<input id="wba" type="search" name="q" value="" class="search box" />
<input type="submit" value="Go" class="search button" />

至于javascript，我尝试了一切，包括jquery网站上的演示，但没有成功。。。有人帮我设置自动完成来显示数据吗

编辑

---

此代码来自jqueryui网站演示…

基本前提（没有任何代码）是：

在jQuery中，将事件侦听器绑定到输入，这样当用户键入某个内容时，就会调用一个函数 然后，该函数使用jQuery的一个ajax函数将输入值发送到php脚本 php脚本回显json编码的字符串 jqueryajax函数接收字符串 然后，该函数获取json数据，并以某种样式化的方式将其附加到输入的外部 这些选项中的每一个都有一个事件监听器绑定，这样当单击一个选项时，就会发生一些事情——要么用单击的项填充输入，要么运行另一个函数，加载一个页面，等等。

---

有很多不同的方法来实现这一点，这就是为什么我没有用实际的函数来回答。这取决于你的目标

下面是我如何在服务器上使用C实现它的

JavaScript

---

应该是这样的

// JS
$(function() {
  $("#wba").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "search.php",
        dataType: "jsonp",
        data: { q: request.term },
        success: function(data) {
          response($.map(data, function(value,key) {
            return { label:value.label , value: value.val }
          }));
        }
      });
    },
    minLength: 2
  });
});​

// PHP
$results = array(
   array('label' =>'label1', 'val' => 'value1'),
   array('label' =>'label2', 'val' => 'value2'),
   array('label' =>'label3', 'val' => 'value3')
);
// Optionally do something with the user input ($_GET["input_value"])
echo $_GET['callback'].'('.json_encode($result).');'​​​​​​​​​

---

我不知道为什么，但这确实有效…

你能发布一个你试图使用的javascript的例子吗？有很多不同的方法来完成这项任务。我想海报是在问如何将JSON输入到：我没有要求我熟悉的流程。。。我只是无法将返回的数据放到下拉列表或日志中，或者不管ppl如何称呼它：@Nick ah。错过了：@Val我的错就在这个假设上。它不起作用。。。它返回jason数据，但没有任何更新的代码，我可以给你的例子链接，如果你想，但它应该工作。。。十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉十指交叉

$(function() {
        function log(message) {
            $("<div/>").text(message).prependTo("#log");
            $("#log").attr("scrollTop", 0);
        }

        $("#wba").autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: "search.php",
                    dataType: "jsonp",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function(data) {
                        response($.map(data.sites, function(item) {
                            alert(item);
                            window.console.debug(item);
                            return {

                                label: item.name ,
                                value: item.url
                            }
                        }))
                    }
                })
            },
            minLength: 2,
            select: function(event, ui) {
                log(ui.item ? ("Selected: " + ui.item.name) : "Nothing selected, input was " + this.value);
            },
            open: function() {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function() {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });
    });

function InitializeElement (element) {
    element.autocomplete("ServerPage.ashx", {
        formatItem: function(data) {
            return "<span style=\"font-size:9pt;word-break:break-all;\">" + data[0] + "<br />" + data[1] + "</span>";
        }
    });
    element.result(function(event, data, formatted) {
        jq(event.currentTarget).siblings('input[type=hidden]').val(data[2]);
        event.currentTarget.value = data[0];
        event.currentTarget.title = data[1];
    });
}

public class ServerPage : ApplicationHandler 
{ 
    protected override void Process()
    {
        String text = (this.Request.Params["q"] ?? String.Empty);

        if (text.Length > 0)
        {
            using (DatabaseRecords records = this.Core.Database.ExecuteRecords("StoredProcedure", new KeyValue("Text", text)))
            {
                while (records.Read())
                {
                    Response.Write(records.GetString("Code") + "|" + records.GetString("Description") + "|" + records.GetInt32("Id") + "\n");   
                }   
            }
        }       
    }
}

// JS
$(function() {
  $("#wba").autocomplete({
    source: function(request, response) {
      $.ajax({
        url: "search.php",
        dataType: "jsonp",
        data: { q: request.term },
        success: function(data) {
          response($.map(data, function(value,key) {
            return { label:value.label , value: value.val }
          }));
        }
      });
    },
    minLength: 2
  });
});​

// PHP
$results = array(
   array('label' =>'label1', 'val' => 'value1'),
   array('label' =>'label2', 'val' => 'value2'),
   array('label' =>'label3', 'val' => 'value3')
);
// Optionally do something with the user input ($_GET["input_value"])
echo $_GET['callback'].'('.json_encode($result).');'​​​​​​​​​