亲爱的,我已经安装了Twitter.Typeahead版本0.11.1。它不起作用。这是我的代码
<div class="form-group" style="display:none" id="serialNumber">
<div class="tt-container">
<label>Serial Number</label>
<input class="typeahead form-control" id="SerialNumber" name="SerialNumber" type="text" value="" placeholder="Enter Serial Number Here.." />
</div>
</div>
<ul id="lstSerials" class="list-group"></ul>
而吼叫是我的剧本
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
wildcard: '%QUERY'
}
});
$('#SerialNumber').typeahead({
minLength: 3,
highlight: true,
hint: true
}, {
name: 'serials',
display: 'serialNumbers',
source: serials
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
这是针对typeahead的样式
.twitter-typeahead .tt-query, .twitter-typeahead .tt-hint {
margin-bottom: 0; }
.tt-hint {
display: block;
width: 100%;
height: 38px;
padding: 8px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #999;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; }
.tt-menu {
min-width: 160px;
margin-top: 2px;
padding: 5px;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box; }
.tt-suggestion {
display: block;
padding: 3px 20px;
width: 100%; }
.tt-suggestion.tt-selectable {
margin: 5px 0px 5px 0px; }
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #428bca; }
.tt-suggestion.tt-cursor a {
color: #fff; }
.tt-suggestion p {
margin: 0; }
最后这里是控制器,为了测试目的,我有一个静态数据
public JsonResult GetSerialNo(string query)
{
List<string> lstTest = new List<string>();
lstTest.Add("aaaHafiz");
lstTest.Add("aaaSiddiq");
lstTest.Add("aaaUmer");
return Json(new { serialNumbers = lstTest }, JsonRequestBehavior.AllowGet);
}
但是当我在写完三个单词后运行应用程序时,我只得到一个看不见的值,不知道为什么......检查也没有显示错误。这些图片中给出了样本输出错误:
嗨我已经对您的代码进行了更改,现在它正常工作。
我添加了返回序列号的Filter函数。
脚本参考
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/typeahead.js/typeahead.jquery.js"></script>
<script src="~/typeahead.js/bloodhound.min.js"></script>
<script>
$(document).ready(function() {
// Instantiate the Bloodhound suggestion engine
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: 'http://localhost:49497/DemoType/GetSerialNo?query=%QUERY',
filter: function (data)
{
// Map the remote source JSON array to a JavaScript object array
return $.map(data.serialNumbers, function (serial)
{
return {
value: serial
};
});
}
}
});
// Initialize the Bloodhound suggestion engine
serials.initialize();
// Instantiate the Typeahead UI
$('.typeahead').typeahead(null, {
displayKey: 'value',
source: serials.ttAdapter()
});
});
</script>
OutPut: -
最后我通过优化我的代码的javascript部分解决了这个问题,下面是我的代码
var sno = [];
var serials = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('serialNumbers'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/Sales/GetSerialNo?query=%QUERY',
filter: function (data) {
return $.map(data.serialNumbers, function (serial) {
return { value: serial };
});
}
}
});
serials.initialize();
$('#SerialNumber').typeahead({
hint: true,
highlight: true,
minLength: 3
}, {
limit: Infinity,
displayKey: 'value',
source: serials.ttAdapter()
}).on("typeahead:select", function (e, data) {
$("#lstSerials").append("<li class='list-group-item'>" + data.value + "</li>");
$("#SerialNumber").typeahead("val", "");
sno.push(data);
});
});
现在它按照期望工作 - 谢谢