C# 和 MVC 中的自动完成文本框答案

【问题标题】：Autocomplete Textbox in C# and MVCC# 和 MVC 中的自动完成文本框
【发布时间】：2016-04-26 01:05:02
【问题描述】：

大家好，感谢您的帮助，

我需要用 C# 和 MVC 中的建议自动完成一个文本框。

视图中的文本框是：

<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="margin-top:2%;">
   <input type="text" class="formLocator" value="Milano" data-date-end-date="0d" id="textLocator" name="searchstring">
   <h4 class="FormTextLocator">Where</h4>
</div>
<div class="hidden-lg hidden-md col-sm-3 col-xs-12" style="margin-top:2%;">
   <input type="text" class="formLocator" value="Milano" data-date-end-date="0d" id="textLocator" name="searchstring">
   <h4 class="FormTextLocator">Where</h4>
</div>

我为此文本框创建了一个 javascript 代码：

$(function () 
{
    $("#textLocator").autocomplete(
    {
        source: "/Home/AutocompleteSuggestions",
        minLength: 1,
        select: function (event, ui) 
        {
            if (ui.item) 
            {
                $("#textLocator").val(ui.item.value);
                $("form").submit();
            }
        }
    });
});

而关联的控制器是：

 public JsonResult AutocompleteSuggestions(string searchstring)
 {
     var db = new TocFruit();
     var suggestions = from s in db.city select s.name;
     var namelist = suggestions.Where(n => n.ToString().StartsWith(searchstring.ToLower()));
     return Json(namelist, JsonRequestBehavior.AllowGet);
 }

但这一切都不起作用，但我不明白我做错了什么。

谢谢大家，

罗伯托

【问题讨论】：

您遇到了什么问题/错误？
你有 2 个相同 id 的文本框？
我已经解决了双id。问题是我没有在文本框下显示结果建议。我已经添加了新代码。谢谢

标签： javascript c# asp.net-mvc autocomplete

【解决方案1】：

Jquery UI AutoComplete in MVC

查看以上链接

还指出根据您的代码，您有 2 个具有相同 id 的文本框

【讨论】：

不错的教程链接:)

【解决方案2】：

好的。现在在您的帮助下，控制器返回正确的值列表，但文本框不显示值。新代码是这么写的：

现在代码是这样写的：

Javascript

$(document).ready(function () {
    $("#textLocator").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Home/AutocompleteSuggestions",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.name, value: item.name };
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
});

HTML

<div class="col-lg-3 col-md-3 hidden-sm hidden-xs" style="margin-top:2%;">
   <input type="text" class="formLocator" value="Milano" data-date-end-date="0d" id="textLocator" name="searchstring">
   <h4 class="FormTextLocator">dove</h4>
</div>

控制器

public JsonResult AutocompleteSuggestions(string term)
{
   var db = new TocFruit();
   var suggestions = from s in db.city select s.name;
   var namelist = suggestions.Where(n => n.ToString().ToLower().StartsWith(term.ToLower()));
   return Json(namelist, JsonRequestBehavior.AllowGet);
}

非常感谢

【讨论】：

你检查过链接吗？