自学MVC（六）：无聊造轮子,Jquery实现AutoComplete-2009年05月10日

程序员喜欢"造轮子",就是说,大家都为了完成同样的功能,重复做前人已经做过的东西. 我的MVC项目里面做到搜索那里了.我不想用asp.net ajax控件里的自动完成控件,想到Jquery的功能比较强大,为什么不用Juery去写呢?
    思路其实和简单:用JS把关键字Post到一个搜索页面,返回一个json表达式的查询结果,然后在页面上显示出来就行了.

     不过想归想,做归做.我还是用了整整一个上午才完成这个功能.
   html界面如下:
  <input id="headq"type="text" onkeyup="dosearch();" > //请注意要用onkeyup事件,不然切换输入法时就会不必要的弹出层.
<div class="Search" id="divsearch">  </div>//这个DIV是负责把查询的结果显示在这里,开始是隐藏的.

  Post查询关键字的js代码 :
function dosearch() {
    $.post("http://www.cnblogs.com/Search/SearchMovies.aspx", { Key: $("#headq").val() },
  function(data, textStatus) {
      $('#divsearch').show();
      $("#divsearch").text("");
      if ($("#headq").val() != "") {
          $("#divsearch").append("<ul id='headSearch' class='options'>" + data.result + "</ul");//我开始用     $("#divsearch").text(),结果不能实现
      }
  }, "json");
}

接收关键字负责查询的页面:SearchMovies.aspx
  protected void Page_Load(object sender, EventArgs e)
        {
            Response.ContentType = "application/json";
           List<MovieInfo> movies = MovieInfoCtrlBase.Instance().Web_GetMoviesSeachByFilter(Request["Key"]);
           string result = "";
           foreach(MovieInfo movie in movies)
           {
              // result += "<li><a  href=\"javascript:cSKT(this);\">" + movie.Mtitle + "</a></li>"; //用<a></a>在jquery里总是取不到内容,还有比较奇怪的是 cSKT('值');这样的写法竟然失效,只能写 this传<li>本身了.
               result += "<li onclick=\"cSKT(this);\" style=\"cursor:hand\">" + movie.Mtitle + "</li>";
           }
                Response.Write("{result: '"+result+"'}");
        
        }
//js脚本,负责当用户点击<li>的时候,把内容显示到   <input id="headq"type="text" onkeyup="dosearch();" > 里
  function cSKT(sender) {
    $('#divsearch').hide();
    $('#headq').val($(sender).text());//注意 this传过来后 用 $(sender).text()来访问<li>里面的内容.
}
基本思路就是这样.等我写完了后我就想估计也有人写过,到网上搜索下,果然有了现成的jquery的autocomplete控件.
http://files.cnblogs.com/huacn/jquery.autocomplete.1.1.2.js

<!--v:3.2-->

   本文版权属于www.51kancctv.com，williams所有，首发http://www.cnblogs.com/，转载请注明出处。