从Json Object获取值并实现jquery自动完成

时间:2015-02-22 10:13:14

标签: javascript jquery ajax json jquery-ui

从json对象格式的ajax响应中获取值,并通过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>

1 个答案:

答案 0 :(得分:0)

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

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

您的服务器将jQuery自动解析的JSON发送回JavaScript对象。这是因为您已将dataType设置为&#39; json&#39;。

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

您以items.consignmentList方式访问该属性,该属性提供了一个您想要自动完成的字符串数组。