MVC4自动完成DropDownList [英] MVC4 AutoComplete DropDownList

问题描述

大家好，

我正在尝试编写自动完成DrwopDown列表，这是我的代码



这是我的控制器

hello guys ,
I am trying to code an AutoComplete DrwopDown List and that is my code

This Is my Controller

public class ItemApiController : ApiController
   {
       //MedicaEntities dbMedica = new MedicaEntities();
       [HttpGet]
       public IEnumerable<Item> GetProducts(string query = "")
       {
           //IEnumerable<Item> items = dbMedica.Items.Where(fun => fun.LatinName.Contains(query));
           //return dbMedica.Items.Where(fun => fun.LatinName.Contains(query));
           using (var db = new MedicaEntities())
           {
               return String.IsNullOrEmpty(query) ? db.Items.ToList() :
               db.Items.Where(p => p.LatinName.StartsWith(query)).ToList();
           }
       }
   }

这是我的观点

this is my view

@model  Medica.ViewModel.CompanyOrderItemModel

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

@{
    Layout = null;
}
@using (Html.BeginForm())
{
    @Html.HiddenFor(m => m.Item.ItemID)
    <input type="text" id="search" placeholder="Search for a product" required />
    <input type="submit" value="Go" id="submit" />
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

<script type="text/javascript">
    var url = '@Url.RouteUrl("DefaultApi", new { httproute = "", controller = "ItemApi" })';
    $('#search').autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                data: { query: request.term },
                dataType: 'json',
                type: 'GET',
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.LatinName,
                            value: item.ID
                        }
                    }));
                }
            })
        },
        select: function (event, ui) {
            $('#search').val(ui.item.label);
            $('#Id').val(ui.item.value);
            return false;
        },
        minLength: 3
    });
</script>

问题是当我输入3位数并放入Beack时指向函数GetProducts来证明它是否会被调用但是它工作正常并且脚本调用函数但问题是自动完成显示没有任何东西可以选择它虽然函数GetProducts返回一个列表，我该如何解决这个问题问题

感谢高级。

the problem is when i typing 3 digits and put Beack Point in the function GetProducts to prove if it will be called or not but it work fine and the Script call the function but the problem is the auto complete show nothing to select it from although the function GetProducts returns a list , how can i solve this issue
thanks in advanced .

推荐答案

（' #search'）。autocomplete（{
source： function （request，response）{

('#search').autocomplete({ source: function (request, response) {

.ajax（{
url：url，
data：{query：request.term}，
dataType：' json'，
类型：' GET'，
成功： function （data）{
response（

.ajax({ url: url, data: { query: request.term }, dataType: 'json', type: 'GET', success: function (data) { response(

.map（data， function （item）{
return {
label：item.LatinName，
value：item.ID
}
}））;
}
}）
}，
select： function （event，ui）{

.map(data, function (item) { return { label: item.LatinName, value: item.ID } })); } }) }, select: function (event, ui) {

这篇关于MVC4自动完成DropDownList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！