Javascript typeahead.js生成指定的div

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

---

首先创建一个名为

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

.hide{display:none；}//css
//javascript
$（typeahead类或id名称）。typeahead(
{
提示：错，
推荐理由：没错，
最小长度：1，
类名：{
菜单：“隐藏”//将类名添加到菜单中，以便不显示默认下拉列表
}
},{
姓名：'姓名'，
显示：“名称”，
资料来源：姓名，
模板：{
建议：功能（提示）{
返回提示.name；
}
}
}
);
$（typeahead类或id名称）。on（'typeahead:render'，函数（e，datum）
{
//将显示所有结果的空建议div
$（建议div id或类名'）.empty（）；
var建议=Array.prototype.slice.call（参数，1）；
如果（建议长度）{
对于（var i=0；i<0.length；i++）{
$（'suggestion div'）.append（liveSearch.template(
建议[i].姓名，
建议[i].id]；
}
}否则{
$（'#result'）。追加（'未找到'）；
}
});

只需使用

$（'input'）。提前键入（{menu:$（'your div id'）；}）

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

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

---

对@JamesNorman的建议做了一些修改，这对我很有用：

span.twitter-typeahead{
宽度：100%！重要；
}
.twitter typeahead.hide-element.tt-open{
显示：无！重要；
}
#divToDisplaySuggestions:：before{
颜色：#6f6f6f！重要；
内容：“未找到任何项目”；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

/*
*带猎犬的Typeahead.js 0.11.1
* */
var_objData={}；
_objData.myItems=[]；
var$_myItemsList=$（“#divToDisplaySuggestions”），
$\u myItems=$（“#搜索输入”），
_myItems=新猎犬({
datumTokenizer:函数（数据）{
return Bloodhound.tokenizers.whitespace（datum.value）；
},
queryTokenizer:猎犬，标记，空白，
远程：{
通配符：“%QUERY”，
url:“/includes/ajax.php？ajxFetchQuery=%QUERY”，
转换：函数（_响应）{
//注意：php文件上的响应是一个关联数组。
//将远程源JSON数组映射到JavaScript对象数组。
_objData.myItems=[]；
返回$.map（_响应，函数（_项）{
_objData.myItems.push（_item）；
退货项目；
});
}
}
});
$\u myItems
.提前打印({
提示：错，
推荐理由：没错，
最小长度：3，
类名：{
菜单：“隐藏元素”//将类名添加到菜单中，以便不显示默认下拉列表。
}
},
{
名称：'th my items'，
显示：“id”，
资料来源：_myItems，
限额：20
})
.在({
“typeahead:render”：函数（ev，selectedItemData）{
$\u myItemsList.empty（）；
如果（_objData.myItems.length>0）{
对于（var_i in_objData.myItems）{
var_bkItem=_objData.myItems[_i]；
变量$\bkItem=$（''+\bkItem.id+'
'）；
//附加到列表中。
$\u bkItem.appendTo（$\u myItemsList）；
}
$\u myItemsList.removeClass（‘空预订’）；
}否则{
$\u myItemsList.addClass（‘空预订’）；
}
}
});
$\u myItems
.在({
keyup：函数（）{
var _self=这个；
if（！$（_self）.val（））{
$\u myItemsList.empty（）；
}
如果（_objData.myItems.length==0）和（$（_self.val（）.length>=3））{
$\u myItemsList.addClass（‘空预订’）；
}否则{
$\u myItemsList.removeClass（‘空预订’）；
}
}
});