Question

我一直试图在特定的html元素（如div）中显示typeahead的建议，而不是输入文本框下方的默认自动完成弹出窗口。有没有办法将建议重定向到自定义的html元素。

A

Answer 1

首先创建名为

的css类

   .hide{display:none;}//css
   //javascript
    $(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++){
            $('suggestion div').append(liveSearch.template(
                suggestions[i].name,
                suggestions[i].id));
        }
    }else{
        $('#result').append('<div><h1>Nothing found</h1></div>');
    }
});

Answer 2

只需使用$('input').typeahead({ menu: $('#your-div-id'); })。

classNames 设置div中使用的类的名称：

   $('#frm-searchForm-q').typeahead({
    highlight: true,
    menu: $('.f-search__suggestion'), // my div
    classNames: {
        dataset: 'f-search__results',
        suggestion: 'f-search__item',
        highlight: 'highlight'
    }
  });`

Answer 3

对@JamesNorman的建议进行了一些修改，对我有用：

<style>
    span.twitter-typeahead {
        width: 100% !important;
    }

    .twitter-typeahead .hide-element.tt-open {
        display: none !important;
    }
    #divToDisplaySuggestions::before {
        color: #6f6f6f !important;
        content: 'No item found';
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<input type="text" class="form-control" id="searchInput" placeholder="Enter Item to Search" autocomplete="off">

/*
* Typeahead.js 0.11.1 with Bloodhound
* */

var _objData = {};
_objData.myItems = [];

var $_myItemsList = $('#divToDisplaySuggestions'),
    $_myItems = $('#searchInput'),
    _myItems = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.value);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        remote: {
            wildcard: '%QUERY',
            url: '/includes/ajax.php?ajxFetchQuery=%QUERY',
            transform: function (_response) {
                // Note _response on php file is an Associative Array.
                // Map the remote source JSON array to a JavaScript object array.
                _objData.myItems = [];
                return $.map(_response, function (_item) {
                    _objData.myItems.push(_item);
                    return _item;
                });
            }
        }
    });

$_myItems
    .typeahead({
            hint: false,
            highlight: true,
            minLength: 3,
            classNames: {
                menu: 'hide-element' // add class name to menu so default dropdown does not show.
            }
        },
        {
            name: 'th-my-items',
            display: 'id',
            source: _myItems,
            limit: 20
        })
    .on({
        'typeahead:render': function (ev, selectedItemData) {
            $_myItemsList.empty();

            if (_objData.myItems.length > 0) {
                for (var _i in _objData.myItems) {
                    var _bkItem = _objData.myItems[_i];
                    var $_bkItem = $('<p>' + _bkItem.id + '</p>');
                    // Append to list.
                    $_bkItem.appendTo($_myItemsList);
                }
                $_myItemsList.removeClass('empty-booking');
            } else {
                $_myItemsList.addClass('empty-booking');
            }
        }
    });

$_myItems
    .on({
        keyup: function () {
            var _self = this;
            if (!$(_self).val()) {
                $_myItemsList.empty();
            }
            if ((_objData.myItems.length === 0) && ($(_self).val().length >= 3)) {
                $_myItemsList.addClass('empty-booking');
            } else {
                $_myItemsList.removeClass('empty-booking');
            }
        }
    });

typeahead.js指定div中的结果

3 个答案: