Question

不是编程新手，而是Javascript和JQuery的新手。

难以确定解析JSON结果的位置，我从JAX自动完成的AJAX查询中收到了回复。

这是我到目前为止所拥有的：

$(document).ready(function () { 

  function split( val ) { 
    return val.split( /,\s*/ );
  } 
  function extractLast( term ) { 
    return split( term ).pop();
  }

  $('#related').bind( "keydown", function( event ) {
    if ( event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete( "instance" ).menu.active ) { 
      event.preventDefault();
    }
  }).autocomplete({ 
    source: function( request, response ) { 
      $.getJSON( "/api/v1/indicator/", { specific: extractLast( request.term ) }, response);
    }, search: function() { 
      var term = extractLast ( this.value ) ;
      if ( term.length < 2) { 
        return false;
      }
    }, focus: function() { 
      return false;
    }, select: function( event, ui ) { 
      var terms = split( this.value );
      console.log(terms);
      terms.pop();
      terms.push( ui.item.value );
      terms.push( "" ) ;
      this.value = terms.join( ", " );
      return false;
    }
  });
});

JSON结果如下所示：

{"data": [{"value": "dfdsfsdfasdf.com"}]}

我希望使用从AJAX查询中返回的结果填充'#related'输入。

编辑1：

好的，所以这是新的代码部分：

                source: function( request, response ) { 
                    $.getJSON( "/api/v1/indicator/", { specific: extractLast( request.term ) },
                    function(data) {
                        var indicatorItems = [];
                        $.each(data, function(k, v) { 
                            $.each(v, function(i, indicator) { 
                                indicatorItems.push(indicator['value']);
                            });
                        });
                        console.log(indicatorItems);
                        response(indicatorItems);
                    })

现在，它仍然没有显示在自动完成的UI中，我没有抛出任何错误。上面的哪些函数（搜索，焦点或选择）是“响应”变量传递和操作的位置？我正在查看AutoComplete的文档，我似乎无法正确使用它。

编辑2：

好吧，显然它正在工作，但它没有显示在正确的容器中。我可以看到结果填充在'#related'输入之外（在后台）。

编辑3：

搞定了！需要使用

更改CSS

.ui-autocomplete { z-index: 1050; }

Answer 1

source: function( request, response ) { 
      $.getJSON( "/api/v1/indicator/", 
                 { specific: extractLast(request.term ) },  
                 function(data){
                      var indicatorItems = [];
                      $.each(data, function(k, v) { 
                          $.each(v, function(i, indicator) { 
                             indicatorItems.push({
                                  value: indicator['value'], 
                                  label: indicator['value']
                             }
                          });
                      });
                      response(indicatorItems);  

                 });
    },

JQuery自动完成，解析JSON结果

1 个答案: