Jquery.autocomplete不起作用
Jquery .autocomplete not working
我有一个jquery自动完成程序,它什么都不做。我已经使用了这里的代码。这在他们的例子中是有效的。
有一些变化。。。首先,数组是从viewModelList中创建的,它可以正常工作。这里有一小部分:
var suburbs = [
{
id: "17023",
suburb: "Epsom",
postCode: "3551",
state: "VIC"
},
{
id: "17024",
suburb: "Muskerry",
postCode: "3557",
state: "VIC"
}
我试着用信息来表明它是什么,但即使是信息也不起作用。。。我甚至无法获得响应值。。
我在表单下面为消息创建了一个div,并使用单击函数对其进行了测试。。我确实在"#Suburbs"id上尝试了".change"功能,但一无所获。。
这是代码:
<script>
(function ($) {
$(function () {
var suburbs = [
@for (var i = 0; i < Model.SuburbAndPostcodesList.Count; i++) {
<text>{
id: "@Model.SuburbAndPostcodesList[i].SuburbsAndPostcodesId",
suburb: "@Model.SuburbAndPostcodesList[i].Suburb",
postCode: "@Model.SuburbAndPostcodesList[i].PostCode",
state: "@Model.SuburbAndPostcodesList[i].State.ShortName"
}@(i == Model.SuburbAndPostcodesList.Count - 1 ? "" : ",")</text>
}
];
$("#Suburb").autocomplete({
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
//addMessage(" sniffing: '" + item + "'<br/>");
return matcher.test(item.suburb);
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
select: function (value, data) {
if (typeof data == "undefined") {
addMessage('You selected: ' + value + "<br/>");
} else {
addMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
function addMessage(msg) {
$('#msgs').append(msg);
}
});
});
</script>
id"#Suburb"是正确的,适用于.autocomplete.的简单版本
编辑:这是javascript的页面代码。。希望这就是你所追求的。。
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="/lib/jquery-ui/jquery-ui.js"></script>
<script>
(function ($) {
$(function () {
var suburbs = [
{
id: "17023",
suburb: "Epsom",
postCode: "3551",
state: "VIC"
},
{
id: "17024",
suburb: "Muskerry",
postCode: "3557",
state: "VIC"
},
{
id: "17055",
suburb: "Bonnet Hill",
postCode: "7053",
state: "TAS"
},
{
id: "17056",
suburb: "Wellington Park",
postCode: "7054",
state: "TAS"
}
];
$("#Suburb").autocomplete({
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
//addMessage(" sniffing: '" + item + "'<br/>");
return matcher.test(item.suburb);
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
select: function (value, data) {
if (typeof data == "undefined") {
addMessage('You selected: ' + value + "<br/>");
} else {
addMessage('You selected: ' + data.item.value + "<br/>");
}
}
});
function addMessage(msg) {
$('#msgs').append(msg);
}
});
});
</script>
编辑2:这是div元素"郊区",我认为这可能是一个好主意,看看自动完成正在做什么。
<div class="form-group">
<label class="col-md-2 control-label" for="Suburb">Suburb:</label>
<div class="col-md-10">
<input class="form-control" type="text" data-val="true" data-val-required="A suburb name is required" id="Suburb" name="Suburb" value="Eaglehawk" />
<span class="text-danger field-validation-valid" data-valmsg-for="Suburb" data-valmsg-replace="true" />
</div>
</div>
好吧,有几件事:
首先:jQuery .ready()
函数根本没有运行。你将几种速记和高级技术结合在一起,但它们不起作用。(在下面的评论中有更多详细信息)在你可以做一些研究并记下概念之前,最好使用长手法,只做
$(document).ready(function() {
});
第二:当您执行$('#Suburb')
时,这意味着您必须在文档中的某个位置具有id="Suburb"
元素。你的输入没有。
第三:您返回的a
数组是一个对象数组,您的自动补全无法识别。您要么需要返回一个字符串数组,要么需要返回以下格式的对象数组:{ label: "Choice1", value: "value1" }
。实现这一点的最简单方法就是在.grep
:之后将.map
添加到现有代码中
source: function (req, responseFn) {
addMessage("search on: '" + req.term + "'<br/>");
var re = $.ui.autocomplete.escapeRegex(req.term);
var matcher = new RegExp("^" + re, "i");
var a = $.grep(suburbs, function (item , index) {
return matcher.test(item.suburb);
});
a = $.map(a, function(x){
return x.suburb;
});
addMessage("Result: " + a.length + " items<br/>");
responseFn(a);
},
话虽如此,我已经对你的代码做了一些修改(做了一些假设),这是一个工作小提琴。对不起,当你添加你的小提琴时,我已经开始自己制作小提琴了。继续使用我创造的小提琴比修改你的小提琴更容易。
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- Meteor-添加用户自定义字段的方法不起作用
- 为什么 .focus() 不起作用,而 .css(“color”,“red”) 在同一个选择器上起作用
- Textarea必需的attribut在javascript中不起作用
- 为什么javascript:void(0)在Firefox中不起作用
- 退出全屏不起作用