Javascript 在mvc中使用jquery自动完成文本框
我已经使用ajax结果实现了文本框中自动完成的代码。我使用了下面的代码来实现文本框中的自动完成 HTML:Javascript 在mvc中使用jquery自动完成文本框,javascript,jquery,ajax,asp.net-mvc,autocomplete,Javascript,Jquery,Ajax,Asp.net Mvc,Autocomplete,我已经使用ajax结果实现了文本框中自动完成的代码。我使用了下面的代码来实现文本框中的自动完成 HTML: <div class="form-group col-xs-15"> <input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" > </div> <link rel="stylesheet" href="//code.jquery.c
<div class="form-group col-xs-15">
<input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" >
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$("#tableOneTextBox").autocomplete({
source: function (request, response) {
var tableDetails =
{
TextBoxValue: $("#tableOneTextBox").val()
}
$.ajax({
type: "POST",
url: domainName + "api/autocompletetextbox",
data: tableDetails,
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
});
}
});
<input type="text" class="form-control ui-autocomplete-input" id="tableOneTextBox" placeholder="Value" autocomplete="off">
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: block; width: 217px; top: 188px; left: 760px;">
<li class="ui-menu-item" id="ui-id-2" tabindex="-1">01 - Chennai</li>
<li class="ui-menu-item" id="ui-id-3" tabindex="-1">02 - Coimbatore</li>
<li class="ui-menu-item" id="ui-id-4" tabindex="-1">03 - Kanchipuram</li>
<li class="ui-menu-item" id="ui-id-5" tabindex="-1">08 - Bharuch</li></ul>
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>4 results are available, use up and down arrow keys to navigate.</div></span>
视图中呈现的html:
<div class="form-group col-xs-15">
<input type="text" class="form-control" id="tableOneTextBox" placeholder="Value" >
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
$("#tableOneTextBox").autocomplete({
source: function (request, response) {
var tableDetails =
{
TextBoxValue: $("#tableOneTextBox").val()
}
$.ajax({
type: "POST",
url: domainName + "api/autocompletetextbox",
data: tableDetails,
success: function (data) {
response($.map(data, function (item) {
return { label: item, value: item };
}))
}
});
}
});
<input type="text" class="form-control ui-autocomplete-input" id="tableOneTextBox" placeholder="Value" autocomplete="off">
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" tabindex="0" style="display: block; width: 217px; top: 188px; left: 760px;">
<li class="ui-menu-item" id="ui-id-2" tabindex="-1">01 - Chennai</li>
<li class="ui-menu-item" id="ui-id-3" tabindex="-1">02 - Coimbatore</li>
<li class="ui-menu-item" id="ui-id-4" tabindex="-1">03 - Kanchipuram</li>
<li class="ui-menu-item" id="ui-id-5" tabindex="-1">08 - Bharuch</li></ul>
<span role="status" aria-live="assertive" aria-relevant="additions" class="ui-helper-hidden-accessible"><div>4 results are available, use up and down arrow keys to navigate.</div></span>
02-Coimbatore
03-Kanchipuram
- 08-Bharuch
如果有4个结果可用,请使用上下箭头键进行导航。
问题
值,但未显示类似视图的建议列表。请帮帮我。
我试过很多例子。请让我知道您的建议,这对我完全有帮助。将jquery库按正确的顺序排列,如:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
请再试一次,因为所有其他库都基于
jquery
,所以它必须是应用程序中的第一个库。很抱歉,我没有更改下面的内容
$(".ui-front").css("z-index","10000");
您是否包含了相关的css文件?是的,添加了。请查找问题,我在html中使用了css。请让我知道,如果你有任何其他css列表@StephenMueckeYou的脚本顺序错误-
jquery
必须是第一位的我也使用了脚本,但不起作用@斯蒂芬·穆克:什么不起作用。您在浏览器控制台中遇到了什么错误?我也使用了您所说的脚本,但不起作用@控制台中的MayanakAny错误?在Mayank没有显示错误