jQuery的.autocomplete不工作 [英] Jquery .autocomplete not working
问题描述
我有没有做任何事情一个jQuery自动完成。我用从的code 。它工作在他们的例子。
有一些变化。首先，阵列是由viewModelList创建和它的作品。这里是它的一小部分：
VAR郊区= [
{
ID：17023，
郊区：泻，
后code：3551
状态：VIC
}，
{
ID：17024，
郊区：马斯克里
后code：3557
状态：VIC
}
我已经尽力用消息表明respose - 它是什么，但即使这些消息不工作......我甚至无法获得响应值。
我创建的窗体的消息下一个div和他们的工作已经使用点击功能测试。我曾尝试对#SuburbsID的.change的功能，也没有什么..
下面是code：
＆LT;脚本＆GT;
（函数（$）{
$（函数（）{ VAR郊区= [
@for（VAR I = 0; I＆LT; Model.SuburbAndPost codesList.Count;我++）{
＆LT;文字和GT; {
ID：@ Model.SuburbAndPost codesList [I] .SuburbsAndPost codeSID
郊区：@ Model.SuburbAndPost codesList [I] .Suburb
后code：@ Model.SuburbAndPost codesList [I] .POST code，
状态：@ Model.SuburbAndPost codesList [I] .State.ShortName
} @（我== Model.SuburbAndPost codesList.Count - 1：？）LT; /文字和GT;
}
]; $（＃郊区）。自动完成（{
来源：功能（REQ，responseFn）{
方法addMessage（上的搜索：'+ req.term +'＆LT; BR /＆gt;中）;
VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
VAR匹配=新的RegExp（^+重，我）;
风险价值= $ .grep（郊区，功能（项指数）{
//方法addMessage（与＆amp; NBSP;＆安培; NBSP;嗅：'+项目+'＆LT; BR /＆gt;中）;
返回matcher.test（item.suburb）;
}）;
方法addMessage（结果：+则为a.length +项目＆lt; BR /＆gt;中）;
responseFn（一）;
}， 选择：函数（值，数据）{
如果（typeof运算数据==未定义）{
方法addMessage（'您已选择：'+价值+＆LT; BR /＆gt;中）;
}其他{
方法addMessage（'您已选择：'+ data.item.value +＆LT; BR /＆gt;中）;
}
}
}）; 函数方法addMessage（MSG）{
$（'＃封邮件）追加（MSG）。
}
}）;
}）;＆LT; / SCRIPT＆GT;
id为#Suburb是正确的和.autocomplete的简单版本的工作。
编辑：这里是页code代表的JavaScript ..希望这是你所追求的。
＆LT;脚本SRC =/ lib中/ jQuery的/距离/ jquery.js和＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =/ lib中/引导/距离/ JS / bootstrap.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本的src =/ JS / site.js V = EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo？＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =/ lib中/ jQuery的/距离/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =/ lib中/ jQuery的验证/距离/ jquery.validate.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =/ lib中/ jQuery的验证 - 不显眼/ jquery.validate.unobtrusive.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =/ lib中/ jQuery的的UI / jQuery的-ui.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本＆GT;
（函数（$）{
$（函数（）{ VAR郊区= [
{
ID：17023，
郊区：泻，
后code：3551
状态：VIC
}，
{
ID：17024，
郊区：马斯克里
后code：3557
状态：VIC
}，
...
{
ID：17055，
郊区：博内臣，
后code：7053
状态：TAS
}，
{
ID：17056，
郊区：威灵顿公园
后code：7054
状态：TAS
}
]; $（＃郊区）。自动完成（{
来源：功能（REQ，responseFn）{
方法addMessage（上的搜索：'+ req.term +'＆LT; BR /＆gt;中）;
VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
VAR匹配=新的RegExp（^+重，我）;
风险价值= $ .grep（郊区，功能（项指数）{
//方法addMessage（与＆amp; NBSP;＆安培; NBSP;嗅：'+项目+'＆LT; BR /＆gt;中）;
返回matcher.test（item.suburb）;
}）;
方法addMessage（结果：+则为a.length +项目＆lt; BR /＆gt;中）;
responseFn（一）;
}， 选择：函数（值，数据）{
如果（typeof运算数据==未定义）{
方法addMessage（'您已选择：'+价值+＆LT; BR /＆gt;中）;
}其他{
方法addMessage（'您已选择：'+ data.item.value +＆LT; BR /＆gt;中）;
}
}
}）; 函数方法addMessage（MSG）{
$（'＃封邮件）追加（MSG）。
}
}）;
}）;＆LT; / SCRIPT＆GT;
EDIT2：这里是div元素郊区，因为我认为它可能是一个好主意，看看自动完成正在
。 ＆LT; DIV CLASS =表单组＆GT;
＆LT;标签类=COL-MD-2控制标签为=郊区＆GT;郊区：其中; /标签＆gt;
＆LT; DIV CLASS =COL-MD-10＆GT;
＆LT;输入类=表格控TYPE =需要一个郊区的名字，文本数据-VAL =真正的数据-VAL-需要= ID =郊区NAME =郊区VALUE =Eaglehawk /＆GT;
＆LT;跨度类=TEXT-危险现场验证，有效的数据valmsg换=郊区数据valmsg替换=真/＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
好吧，几件事情：
第一：你的jQuery 。就绪（）功能不运行在所有。要结合几个速记和先进的技术，他们不工作。 （在下面的评论对这个更多细节），直到您可以做一些研究，并取得了概念下，可能更好地使用长手的方法，只是做
$（文件）。就绪（函数（）{
}）;
第二：当你做 $（'＃郊区'），这意味着你必须有一个与 ID =郊区的元素某处在文档中。您的意见并没有说。
第三：你的您返回数组是你自动完成将无法识别对象的数组。你要么需要返回一个字符串数组或对象在这种格式的数组： {标签：Choice1值：值1} 。做到这一点最简单的方法是只需添加 .MAP 到现有code，右后 .grep ：
来源：功能（REQ，responseFn）{
方法addMessage（上的搜索：'+ req.term +'＆LT; BR /＆gt;中）;
VAR重= $ .ui.autocomplete.escapeRegex（req.term）;
VAR匹配=新的RegExp（^+重，我）;
风险价值= $ .grep（郊区，功能（项指数）{
返回matcher.test（item.suburb）;
}）;
一个= $ .MAP（一，功能（X）{
返回x.suburb;
}）;
方法addMessage（结果：+则为a.length +项目＆lt; BR /＆gt;中）;
responseFn（一）;
}，
话虽这么说，我已经取得了一些MODS到code（作出一些假设），这里是一个工作的小提琴。对不起，我已经开始通过您添加你的时候我自己捣鼓工作。这是比较容易，只是继续我创建比它来修改你的小提琴。
I have a jquery autocomplete which is not doing anything. I have used the code from here. It works in their example.
There are some changes... First, array is created from a viewModelList and it works. here is a small part of it:
var suburbs = [
{
id: "17023",
suburb: "Epsom",
postCode: "3551",
state: "VIC"
},
{
id: "17024",
suburb: "Muskerry",
postCode: "3557",
state: "VIC"
}
I have endeavoured to use messages to indicate the respose - what it is but even the messages dont work... I cannot even get the response value..
I created a div below the form for the messages and they work having been tested using a click function.. I did try a ".change" function on the "#Suburbs" id and also got nothing..
Here is the code:
<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>
The id "#Suburb" is correct and worked for a simple version of .autocomplete.
EDIT: here is page code for the javascript.. Hope this is what you were after..
<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>
EDIT2: Here is the div element "suburb" as I think its probably a good idea to see what the autocomplete is working on.
<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>
Okay, a few things:
first: your jQuery .ready() function isn't running at all. You are combining several shorthand and advanced techniques, and they are not working. (More details on this in the comments below) Until you can do some research and get the concepts down, probably better to use the long-hand method, and just do
$(document).ready(function() {
});
Second: when you do $('#Suburb'), that means you have to have an element with id="Suburb" someplace in your document. Your input didn't have that.
Third: your a array that you are returning is an array of objects which your autocomplete won't recognize. You either need to return an array of strings, or an array of objects in this format: { label: "Choice1", value: "value1" }. The easiest way to accomplish this was just to add .map into your existing code, right after the .grep:
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);
},
That being said, I have made some mods to your code (making some assumptions) and here is a working fiddle. Sorry, I had already started working on my own fiddle by the time you added yours. It was easier to just continue with the fiddle that I created than it was to modify yours.
这篇关于jQuery的.autocomplete不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
