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/

单击搜索查询结果中的特定结果时。您可以使用updater函数使用选定的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

    }
});

Answer 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>');
        }
    });

Bootstrap typeahead会导致div，可能吗？

3 个答案: