Bootstrap typeahead会导致div,可能吗？

Question

我正在尝试将预先输入的结果放到我页面上的特定div中.我得到了JSON回调数据,但我不知道如何使用它来填充特定的div.进程函数具有列出结果的唯一效果,无论其长度如何,都在搜索字段下.

这是我的代码,你知道如何利用回调数据来填充特定的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
              });
          }
    });

Answer 1

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

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

鉴于 html 片段：

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

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

您可以使用以下命令让结果出现在ul元素中：

$('#typeahead').typeahead({menu: '#typeahead-target'});

Answer 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

    }
});