[英]ASP.Net MVC Jquery UI Autocomplete - list not showing up when I debug
I have implemented an autocomplete in my app for zip codes. 我已经在我的应用中实现了自动填充邮政编码。 I am debugging in Firebug and I see in my console that the action is performing and I get a list of zip codes in the list of results, but the actual list is not displaying when I debug.
我正在Firebug中进行调试,并且在控制台中看到该操作正在执行,并且在结果列表中获得了邮政编码列表,但是在调试时未显示实际列表。
Here's the action in my Customers controller: 这是我的客户控制器中的操作:
//the autocomplete request sends a parameter 'term' that contains the filter
public ActionResult FindZipCode(string term)
{
string[] zipCodes = customerRepository.FindFilteredZipCodes(term);
//return raw text, one result on each line
return Content(string.Join("\n", zipCodes));
}
Here's the markup (abbreviated) 这是标记(缩写)
<% using (Html.BeginForm("Create", "Customers")) {%>
<input type="text" value="" name="ZipCodeID" id="ZipCodeID" />
<% } %>
and here's the order I load my scripts: 这是我加载脚本的顺序:
<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#ZipCodeID").autocomplete({ source: '<%= Url.Action("FindZipCode", "Customers") %>'});
});
</script>
Anything obvious that I'm missing? 有什么明显的我想念的吗? Like I say the script is grabbing the list of zip codes, they just won't display on my page when I test.
就像我说的是脚本正在抓取邮政编码列表一样,当我进行测试时,它们不会显示在我的页面上。
EDIT: I added an image that shows what I see in firebug - it appears that I get my zip codes back, but just won't display the dropdown. 编辑:我添加了一张图片,显示了我在萤火虫中看到的内容-看来我找回了邮政编码,但不会显示下拉列表。
I also updated my text box so that it's inside of the ui-widget div like so: 我还更新了文本框,使其位于ui-widget div内,如下所示:
<div class="ui-widget">
<input type="text" name="ZipCodeID" id="ZipCodeID" />
</div>
and this is the script that I'm using: 这是我正在使用的脚本:
<script type="text/javascript">
$(document).ready(function() {
$("#ZipCodeID").autocomplete('<%= Url.Action("FindZipCode", "Customers") %>');
});
</script>
I was able to get the autocomplete suggestions working using the following code: 我可以使用以下代码获得自动完成建议:
Controller: 控制器:
public JsonResult FindZipCode(string term)
{
VetClinicDataContext db = new VetClinicDataContext();
var zipCodes = from c in db.ZipCodes
where c.ZipCodeNum.ToString().StartsWith(term)
select new { value = c.ZipCodeID, label = c.ZipCodeNum};
return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
}
Markup: 标记:
<script type="text/javascript">
$(document).ready(function() {
$("#ZipCodeID").autocomplete({
source: '<%= Url.Action("FindZipCode", "Customers") %>',
});
});
</script>
<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>
I had huge problems with autocomplete few months ago when first setting it up. 几个月前,我第一次设置自动完成功能时遇到了很大的问题。 For instance, the simple default wireup like you do it never worked for me.
例如,像您这样简单的默认连接对我来说是行不通的。 I had to specify everything and also attach the result function to it.
我必须指定所有内容,并将结果函数附加到它。
This works 100% but it might not be suitable for you. 这可以100%起作用,但可能不适合您。 But I hope it helps.
但我希望这会有所帮助。 Put both in document.ready() function.
将两者都放在document.ready()函数中。
$("#products").autocomplete('<%:Url.Action("GetProducts", "Product") %>', {
dataType: 'json',
parse: function (data) {
var rows = new Array(data.length), j;
for (j = 0; j < data.length; j++) {
rows[j] = { data: data[j], value: data[j].Title, result: data[j].Title };
}
return rows;
},
formatItem: function (row, y, n) {
return row.PrettyId + ' - ' + row.Title + ' (' + row.Price + ' €)';
},
width: 820,
minChars: 0,
max: 0,
delay: 50,
cacheLength: 10,
selectFirst: true,
selectOnly: true,
mustMatch: true,
resultsClass: "autocompleteResults"
});
$("#products").result(function (event, data, formatted) {
if (data) {
var item = $("#item_" + data.PrettyId),
edititem = $("#edititem_" + data.PrettyId),
currentQuantity;
// etc...
}
});
Try returning JSON from your controller action: 尝试从控制器操作中返回JSON:
public ActionResult FindZipCode(string term)
{
string[] zipCodes = customerRepository.FindFilteredZipCodes(term);
return Json(new { suggestions = zipCodes }, JsonRequestBehavior.AllowGet);
}
Also don't forget to include the default CSS or you might not see the suggestions div appear. 另外,请不要忘记包含默认CSS,否则您可能看不到建议div出现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.