ASP.Net MVC jQuery用户界面自动完成 - 列表不显示，当我调试 [英] ASP.Net MVC Jquery UI Autocomplete - list not showing up when I debug

问题描述

我在我的应用程序对于ZIP codeS实现自动完成。我调试萤火虫和我在控制台的操作正在执行看，我得到的结果列表中的zip codeS的列表，但是当我调试的实际列表不显示。

下面是我的客户控制器的操作：

  //自动完成请求，发送一个参数术语包含过滤器
公众的ActionResult FindZip code（串词）
{
    字符串[]拉链codeS = customerRepository.FindFilteredZip codeS（项）;    //每行返回原始文本，一个结果
    返回内容（的string.join（\\ n，邮编codeS））;
}
 

下面是标记（略）

 ＆LT;使用（Html.BeginForm（创建，客户））{％GT％;
＆LT;输入类型=文本值=NAME =邮编codeIDID =邮编codeID/＆GT;
＆LT;％}％GT;
 

和这里是我打开我的脚本命令：

 ＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jQuery的-1.4.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jquery.ui.core.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jquery.ui.widget.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jquery.ui.position.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =/脚本/ jquery.ui.autocomplete.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃邮编codeID）自动完成（{来源：'＆LT;％= Url.Action（FindZip code，客户）％GT;'}）;
    }）;
＆LT; / SCRIPT＆GT;
 

任何明显的我失踪？就像我说的脚本被抓拉链codeS的名单，他们是不会我的网页上，当我测试显示。

编辑：我添加了一个图像，显示我在萤火看到的 - 看来，我让我的zip codeS回来，但只是将不显示下拉菜单。

我也更新了我的文本框，以便它的UI窗口小部件的div像这样的内部：

 ＆LT; D​​IV CLASS =UI窗口小部件＆GT;
    ＆LT;输入类型=文本名称=邮编codeIDID =邮编codeID/＆GT;
＆LT; / DIV＆GT;
 

这是我使用的脚本：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃邮编codeID）自动完成（'＆LT;％= Url.Action（FindZip code，客户）％GT;'）。
    }）;
＆LT; / SCRIPT＆GT;
 

解决方案

我能够获得自动完成建议使用以下code工作：

控制器：

 公共JsonResult FindZip code（串词）
    {
        VetClinicDataContext DB =新VetClinicDataContext（）;        VAR拉链codeS =从C在db.Zip codeS
                       其中，c.Zip codeNum.ToString（）。StartsWith（项）
                       选择新{值= c.Zip codeID，标签= c.Zip codeNUM};        返回this.Json（ZIP codeS，JsonRequestBehavior.AllowGet）;
    }
 

标记：

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（文件）。就绪（函数（）{
        $（＃邮编codeID）。自动完成（{
                  来源：'＆LT;％= Url.Action（FindZip code，客户）％GT;，
        }）;
    }）;
＆LT; / SCRIPT＆GT;＆LT; D​​IV CLASS =UI窗口小部件＆GT;＆LT;输入类型=文本名称=邮编codeIDID =邮编codeID/＆GT;＆LT; / DIV＆GT;
 

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.

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:

<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>

这篇关于ASP.Net MVC jQuery用户界面自动完成 - 列表不显示，当我调试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！