asp.net mvc 自動提示 仿google提示框

在mvc項目中用到了，完全藉助jq的功能，首先映入jq的架構以及相關的js和css

@section head{

 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("/Content/jquery.autocomplete.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("/Scripts/jquery.autocomplete.js")" type="text/javascript"></script>

 

  <script type="text/javascript">
       
    function findValue(li)
     { 
        if (li == null) return alert("沒找到");
        if (!!li.extra)
        var sValue =unescape(li.extra[0]);
     
    }
    function selectItem(li)
     {
        findValue(li);
     }
  
    $(document).ready(function()
     {
         $("#test").autocomplete("/Area1/en-us/Sky/GetNameList1",  //這裡我加了地區，必須寫完整路徑如果沒有地區/Controller/Action
          {
            delay: 10,
            minChars: 1,
            matchSubset: 1,
            cacheLength: 1,
            onItemSelect: selectItem,
            onFindValue: findValue,
            autoFill: true,
            maxItemsToShow: 20
        });
    });   
</script>

}

action 方法：

 public ContentResult GetNameList1()
        {
            string name = "a\nb\nc\nd\ne\nf\ng\nh\nj\n";
            return Content(name);
        }

html:

 <input id="test"  type="text"  />

就這麼簡單的實現了該功能，不得說jq的強大了！