【问题标题】:jquery autocomplete does not print the resultsjquery自动完成不打印结果
【发布时间】:2012-05-27 21:19:43
【问题描述】:

我正在尝试第一次使用 jquery ui 的autocomplete 功能,但我无法使其正常工作

javascript代码:

$("#search_input").autocomplete({
  source: function(request, response) {
    $.getJSON( "do.php", { OP: "news_search", category: cat_id, get: request }, function(result){
      /*response($.map(result, function(item) {
        return item.NAME;
      }));*/
      response(result);
      console.log(result);
    })
  },
  minLength: 2
});

返回数据,但不显示:http://i46.tinypic.com/1z85c0.png

我什至尝试添加一些 css 以查看它是否有效:

.ui-autocomplete{
    position: absolute;
    z-index: 1000;
    border: 1px solid red;
}

【问题讨论】:

    标签: jquery css autocomplete jquery-autocomplete


    【解决方案1】:

    您的 JSON 应该返回 labelvalue 参数,而不是 idheadline

    具有标签和值属性的对象数组:
    [ { 标签:“Choice1”,值:“value1”},...]

    http://jqueryui.com/demos/autocomplete/

    【讨论】:

    • 但是怎么做呢?硬编码? result 中的数据由 print_r(json_encode($data['search_results'])); 返回,它是使用 mysql 查询的结果构建的
    • 我不熟悉 PHP,但我假设如果直接读取字段名称,您需要在查询中为字段设置别名。如果您对此有疑问,最好提出一个新问题。
    • 所以如果我有类似的东西:[ { label: "123155", value: "Welcom to Stackoverflow" }, ... ] 是正确的?
    • 是的,应该可以,尽管您可能希望 label = Welcome, value = 123155。
    • Object { value="1545520", label="Movistar"} 仍然没有成功,现在......它没有显示任何东西......甚至没有箭头所在的图片中的那个小东西
    【解决方案2】:

    我最终阅读了这篇文章:http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

    所以这就是我使用它的方式并且它是有效的:

    $("#search_input").autocomplete({
        source: function(request, add) {
            $.getJSON("do.php", { OP: "news_search", category: cat_id, get: request }, function(results){
    
              consoloe.log(results)
              var suggestions = [];
    
              $.each(results, function(i, val){
                suggestions.push(val.headline)
              });
    
              add(suggestions);
    
            });
        },
        minLength: 2
    });
    

    【讨论】:

      猜你喜欢
      • 2011-01-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-08-09
      • 2011-10-12
      相关资源
      最近更新 更多