[英]Typeahead/bootstrap-tagsinput with MVC controller not working
[英]Bootstrap typeahead not working in MVC 5
在我的mvc项目中,IAM尝试实现自动完成功能,但无法正常工作(打字头),我所做的一切都正确,但无法实现。 下面是我的代码。 谁能帮忙
<script type="text/javascript">
$(document).ready(function () {
$("#Search").typeahead({
source: function (query, process) {
var countries = [];
map = {};
// This is going to make an HTTP post request to the controller
return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {
// Loop through and push to the array
$.each(data, function (i, country) {
map[country.Name] = country;
countries.push(country.Name);
});
// Process the details
process(countries);
});
},
updater: function (item) {
var selectedShortCode = map[item].ShortCode;
// Set the text to our selected id
$("#details").text("Selected : " + selectedShortCode);
return item;
}
});
});
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"> </script>
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js" type="text/javascript"></script>
<div>
<input type="text" id="Search" data-provide="typeahead" placeholder="Country" autocomplete="off" />
</div>
typeahead()
等待至少两个参数。 第一个参数是选项数组,然后您可以定义多个数据集。 source
必须在数据集中定义。
请参阅以下用法: https : //github.com/twitter/typeahead.js/blob/master/doc/jquery_typeahead.md#usage
如文档所述, source
必须计算建议集(即JavaScript对象数组 )以进行查询。 您正在传递字符串数组。 除此之外,您还必须设置displayKey
。
如果您在文本字段中写入内容,则source
将在第一次执行。
我为您准备了一个小提琴: http : //jsfiddle.net/dtengeri/EhJvB/
您的代码应如下所示:
<script type="text/javascript">
$(document).ready(function () {
// Notice the first empty object. You can specify options in it.
$("#Search").typeahead({}, {
displayKey: 'Name',
source: function (query, process) {
var countries = [];
map = {};
// This is going to make an HTTP post request to the controller
return $.post('/Registration/GetPossibleLocations', { query: query }, function (data) {
// Loop through and push to the array
$.each(data, function (i, country) {
map[country.Name] = country;
// You have to create an array of JS objects.
// Typeahead will use the displayKey to fetch data from the object.
countries.push({'Name': country.Name});
});
// Process the details
process(countries);
});
},
...
});
});
我更喜欢使用猎犬的集成来获取数据源。 这是有关我如何使用它的示例:
捆绑:
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/layoutScriptsBundle").Include(
"~/_js/_lib/jquery/jquery-{version}.js",
"~/_js/_lib/bootstrap/bootstrap.js",
"~/_js/_lib/typeahead.js/typeahead.bundle.js",
"~/_js/_lib/handlebars.js/handlebars-v1.3.0.js"));
bundles.Add(new StyleBundle("~/bundles/css/libs/layoutStylesBundle").Include(
"~/_css/_lib/bootstrap/bootstrap.css",
"~/_css/_lib/typeahead.js/typeahead.js-bootstrap.css"));
}
}
JavaScript:
<script>
window.siteNS = window.siteNS || {};
jQuery(document).ready(function ($) {
siteNS.typeaheadRemoteUrl = '@Url.ActionFor((ExampleController c) => c.GetTypeaheadData(null))?q=%QUERY';
var myTypeaheadData = new Bloodhound({
datumTokenizer: function (d) {
return Bloodhound.tokenizers.whitespace(d.value);
},
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: siteNS.typeaheadRemoteUrl,
rateLimitWait: 250,
ajax: { cache: false }
}
});
myTypeaheadData.initialize();
$('#myTypeahead').typeahead({
autoselect: true,
highlight: true,
hint: true,
minLength: 1
}, {
source: myTypeaheadData.ttAdapter(),
name: 'myTypeaheadDatasetName',
displayKey: 'ItemName',
templates: {
empty: '',
footer: '',
header: '',
suggestion: Handlebars.compile('<p>{{ItemName}} - {{ItemID}}</p>')
}
});
});
</script>
HTML:
<div class="form-group">
<label class="control-label col-lg-4">Search/Autocomplete</label>
<div class="col-lg-8 myTypeaheadContainer">
<input id="myTypeahead" type="text" class="form-control">
<span class="help-block">Using typeahead.js</span>
</div>
</div>
尝试这个
please remove autocomplete="off" from tag
<div>
<input type="text" id="Search" data-provide="typeahead" placeholder="Country" />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.