jQuery AutoComplete 不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3710835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery AutoComplete does not show up
提问by Lorenzo
Inside a jquery dialog I would like to use the jquery autocomplete feature of jqueryUI.
在 jquery 对话框中，我想使用 jqueryUI 的 jquery 自动完成功能。
I have then prepared an action in my Controller (I am using ASP.NET MVC2) that is as follow
然后我在我的控制器中准备了一个动作（我使用的是 ASP.NET MVC2），如下所示
public ActionResult GetForos(string startsWith, int pageSize)
{
// get records from underlying store
int totalCount = 0;
string whereClause = "Foro Like '" + startsWith + "%'";
List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount);
//transform records in form of Json data
List<ForoModelWS> foros = new List<ForoModelWS>();
foreach ( Foro f in allForos)
foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId),
text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name });
return Json(foros);
}
The class ForoModelWS is a simple class used only to hold the data that shall be transferred in json. Here it is
ForoModelWS 类是一个简单的类，仅用于保存应在 json 中传输的数据。这里是
public class ForoModelWS
{
public string id;
public string text;
}
On the client side I have the following jquery code:
在客户端，我有以下 jquery 代码：
<input id="theForo" />
<script type="text/javascript">
$(document).ready(function() {
$("#theForo").autocomplete({
source: function(request, response) {
$.ajax({
type: "post",
url: "/Foro/GetForos",
dataType: "json",
data: {
startsWith: request.term,
pageSize: 15
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.text,
value: item.text
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
},
open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
But the sliding window with the suggeestions does not appear. If I put an alert inside the response function I can see the correct data.
但是带有建议的滑动窗口没有出现。如果我在响应函数中放置警报，我可以看到正确的数据。
Do I miss something?
我错过了什么吗？
Thanks for helping
谢谢你的帮助
1st EDIT: Moreover, How to change the code to use the "id" property of the selected element in the returned list?
第一次编辑：此外，如何更改代码以使用返回列表中所选元素的“id”属性？
2nd EDIT: I have checked more with Chrome developer tool and I have seen that when autocomplete starts some error appear. the following:
第二次编辑：我已经使用 Chrome 开发人员工具检查了更多内容，我发现当自动完成启动时会出现一些错误。下列：
Uncaught TypeError: Cannot call method 'zIndex' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:317
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320
It seems that the autocomplete plugin does not find an element when it tries to set the z-Index of the sliding suggestion 1 level up its container. The first error appear when the jquery UI Dialog opens. The input for the autocomplete is inside a jquery tab that is inside a jquery Dialog
似乎自动完成插件在尝试将滑动建议 1 的 z-Index 设置为其容器时找不到元素。当 jquery UI 对话框打开时出现第一个错误。自动完成的输入位于 jquery 对话框内的 jquery 选项卡内
3rd EDIT: I am adding the HTML markup to be complete
第三次编辑：我正在添加 HTML 标记以完成
<td width="40%">
<%= Html.LabelFor(model => model.ForoID)%>
<br />
<%= Html.HiddenFor(model => model.ForoID) %>
<input id="theForo" />
<%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>
采纳答案by Lorenzo
I have found the problem.
我找到了问题所在。
In my case I was using also another plugin, this one.
就我而言，我还使用了另一个插件，这个.
That plugin was included at the end of my scripts and caused the error described in the question. I have removed the plugin and everything work very fine.
该插件包含在我的脚本末尾并导致问题中描述的错误。我已经删除了插件，一切都很好。
Before removing it I have tried also to isolate the problem putting in a static html both the scripts. I experienced that even the simplest usage of the autocomplete features, like this
在删除它之前，我还尝试隔离问题，将两个脚本都放入静态 html 中。我经历过即使是最简单的自动完成功能的使用，就像这样
<script type="text/javascript">
$(document).ready(function() {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure",
"COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript",
"Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#theForo").autocomplete({
source: availableTags
});
});
</script>
would cause the error I got.
会导致我得到的错误。
My choice has been to remove the menu plugin even because that code is'nt supported anymore.
我的选择是删除菜单插件，即使该代码不再受支持。
Thanks!
谢谢！
回答by Shashank
This discussion is really old however adding it here just in case it helps someone...If the autocomplete is not working at all as in the drop down does not show up then first check for the most simple form of it with hard coded suggestions like below.
这个讨论真的很老了，但是将它添加到这里以防万一它对某人有帮助......如果自动完成功能根本不起作用，因为在下拉列表中没有显示，那么首先使用硬编码建议检查它的最简单形式以下。
$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
If this does not work then it IS a problem of jquery scripts linked. In my case jquery.min.js was an older version 1.7.1 whereas all other scripts were 1.8.18.
如果这不起作用，那么它是链接的 jquery 脚本的问题。在我的例子中 jquery.min.js 是一个旧版本 1.7.1 而所有其他脚本都是 1.8.18。
Simply replacing the correct version of script solved the problem.
只需更换正确版本的脚本即可解决问题。
Hope this helps someone stumbling with the basic problem of getting autocomplete to work.
希望这可以帮助那些在自动完成工作的基本问题上磕磕绊绊的人。
回答by rebelliard
Just like I answered here, take a loot at my working example of jQuery UI's autocomplete. Pay attention to the sourcepart. Hope it helps:
就像我在这里回答的那样，看看我的 jQuery UI 自动完成工作示例。注意source部分。希望能帮助到你：
var cache = {};
$("#textbox").autocomplete({
source: function(request, response) {
if (request.term in cache) {
response($.map(cache[request.term].d, function(item) {
return { value: item.value, id: item.id }
}))
return;
}
$.ajax({
url: "/Services/AutoCompleteService.asmx/GetEmployees", /* I use a web service */
data: "{ 'term': '" + request.term + "' }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function(data) { return data; },
success: function(data) {
cache[request.term] = data;
response($.map(data.d, function(item) {
return {
value: item.value,
id: item.id
}
}))
},
error: HandleAjaxError // custom method
});
},
minLength: 3,
select: function(event, ui) {
if (ui.item) {
formatAutoComplete(ui.item); // custom method
}
}
});
If you're not doing so by now, get Firebug. It's an invaluable tool for web development. You can set a breakpoint on this JavaScript and see what happens.
如果您现在还没有这样做，请获取Firebug。它是 Web 开发的宝贵工具。您可以在此 JavaScript 上设置断点，看看会发生什么。
回答by sadeg hadi
fgmenu Using the function menu() AND autocomplete Using the function
fgmenu 使用函数 menu() AND autocomplete 使用函数
The function name is the same problems occur
出现函数名相同的问题
You can change the function name in the fgmenu.js
您可以在 fgmenu.js 中更改函数名称
$('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});
