Bootstrap typeahead 结果进入一个div，可能吗？答案

【问题标题】：Bootstrap typeahead results into a div, possible?Bootstrap typeahead 结果进入一个div，可能吗？
【发布时间】：2013-02-20 16:32:48
【问题描述】：

我正在尝试将预先输入的结果放入我页面上的特定 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
              });
          }
    });

【问题讨论】：

您希望自动完成搜索结果显示在单独的 div 中吗？已经有解决方案了吗？

标签： typeahead bootstrap-typeahead

【解决方案1】：

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

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

给定 html 片段：

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

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

您可以使用以下方法使结果显示在 ul 元素中：

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

【讨论】：

这似乎不起作用，至少在任何当前 (0.10.x) 版本中都不起作用...menu 不是一个选项，只是一个局部变量，并且总是被创建为隐藏的div（下拉菜单）。

【解决方案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

    }
});

【讨论】：

【解决方案3】：

首先创建名为.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>');
        }
    });

【讨论】：