【问题标题】:Get Values from Json Object and implement jquery autocomplete从 Json 对象获取值并实现 jquery 自动完成
【发布时间】:2015-02-22 10:13:14
【问题描述】:

从 ajax 响应中获取 json 对象格式工作的值并通过 jQuery 自动完成框实现自动完成。

{ "consignmentList" : [ "" , "AAA" , "ABC" , "BHU" , "MAN" , "WER" , "ZXC"]}

$(document).ready(function() {

  $("input#autoText").autocomplete({
    width: 300,
    max: 10,
    delay: 100,
    minLength: 1,
    autoFocus: true,
    cacheLength: 1,
    scroll: true,
    highlight: false,
    source: function(request, response) {
      $.ajax({
        url: "/jqueryreturn",
        dataType: "json",
        type: "POST",
        data: request,
        success: function(data) {
          //console.log( data);
          var items = data;
          response(items);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          //console.log( textStatus);
        }
      });
    }

  });

});
<link href="http://www.jqueryautocomplete.com/js/jquery/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.autocomplete.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.position.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.widget.min.js"></script>
<script src="http://www.jqueryautocomplete.com/js/jquery/jquery.ui.core.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<input id="autoText" type="text" class="inputlt" name="consignmentId" value="${(consign._id)!" "}" id="c" style="font-size: 16px " onclick="clearInput(this)">
<ul id="consignmentList"></ul>

【问题讨论】:

  • 你的问题到底是什么,你的帖子里没有问号。
  • 我的问题是如何从 json 对象中检索值,为此我应该在哪里编辑此代码以获取包含 json 对象中这些值的自动完成框

标签: javascript jquery ajax json jquery-ui


【解决方案1】:

在您的成功处理程序中,使用 items.consignmentList 调用 response()

success: function(data) {
    var items = data;
    response(items.consignmentList);
}

您的服务器将 jQuery 自动解析的 JSON 发送回一个 JavaScript 对象。这是因为您已将 dataType 设置为“json”。

因此,成功回调中的data 变量是一个具有one 属性consignmentList 的常规JS 对象。

您以items.consignmentList 的身份访问该属性,它提供了一个您希望自动完成的字符串数组。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-07-20
    • 2011-02-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-05-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多