6

我正在尝试将预先输入的结果放入我页面上的特定 div 中。我得到了 JSON 回调数据，但我不知道如何使用它来填充特定的 div。process 函数具有列出结果的唯一效果，无论它需要多长，就在搜索字段下方。

这是我的代码，你知道如何利用回调数据来填充特定的 div 吗？

$('#search').typeahead({
          source: function(query, process) {
              $.ajax({
                  url: '/action/search.php?action=autocomplete',
                  type: 'POST',
                  data: 'query=' + query,
                  dataType: 'JSON',
                  async: true,
                  success: function(data) {
                      //process(data);
                  },
                  minLength: 1
              });
          }
    });
4

3 回答 3

5

实际上有一种非常简单的方法可以将结果放入特定的页面元素中，但是，我不确定它是否实际记录在案。

搜索源代码显示menu可以传入该选项，这似乎是为了让您可以定义包装菜单元素的外观，但是您可以传入一个选择器，它将使用它作为目标.

给定 html 片段：

<input id='#typeahead' type='text'>

<h2>Results</h2>
<ul id="typeahead-target"></ul>

您可以使用以下内容使结果出现在ul元素中：

$('#typeahead').typeahead({menu: '#typeahead-target'});
于 2014-06-06T02:13:11.627 回答
2

我有确切的问题。我已经写了关于相同的详细文章。

浏览文章：http ://www.wrapcode.com/bootstrap/typeahead-json-objects/

当您单击搜索查询结果中的特定结果时。您可以使用更新器函数使用选定的 JSON 对象值填充数据。

$("#typeahead").typeahead({
   updater: function(item){
   //logic on selected item here.. e.g. append it to div in html
   return item;
   }
});

使用此功能：

$("#typeahead").typeahead({
    source: function (query, process) {
        var jsonObj = //PARSED JSON DATA 
        states = [];
        map = {};

        $.each(jsonObj, function (i, state) {
            map[state.KeyName] = state;
            states.push(state.KeyName); //from JSON Key value pair e.g. Name: "Rahul", 'Name' is key in this case
        });

        process(states);
    },
    updater:function (item) {
        $('#divID').html(" " + map[item].KeyName); //from JSON Key value pair

        return item;
        // set more fields

    }
});
于 2013-04-05T06:30:33.457 回答
1

首先创建名为 .hide {display:none;} 的 css 类

$(typeahead class or id name).typeahead(
        {
            hint: false,
            highlight: true,
            minLength: 1,
            classNames: {
                menu: 'hide' // add class name to menu so default dropdown does not show
            }
        },{
            name: 'names',
            display: 'name',
            source: names,
            templates: {
                suggestion: function (hints) {
                    return hints.name;
                }
            }
        }
    );
    $(typeahead class or id name).on('typeahead:render', function (e, datum) 
    {
       //empty suggestion div that you going to display all your result
        $(suggestion div id or class name').empty();
        var suggestions = Array.prototype.slice.call(arguments, 1);
        if(suggestions.length){
            for(var i = 0; i < suggestions.length; i++){
                $('#result').append(liveSearch.template(
                    suggestions[i].name,
                    suggestions[i].id));
            }
        }else{
            $('#result').append('<div><h1>Nothing found</h1></div>');
        }
    });
于 2017-10-10T14:58:03.663 回答