Jquery autocomplete-ajax自动完成例子

Jquery autocomplete-ajax自动完成例子

   相信很多时候我们都会遇到像百度输入一样的自动提示补全的操作，那么我们可以借助

Jquery autocomplete.js 插件。

同时需要注意的是，还有一个是Jquery-Ui 的 autocomplete.js 插件，这两个插件很容易将初学者迷惑，在任务中我发现了许多有关这个例子的插件，不过多数都主要介绍了自动补全的本地实现，那么我将主要介绍一下这个插件的ajax 实现。其实这个插件真的很简单，但是一定要细心的看它的文档才能很快的做出。废话太多，看代码！

 

html 页面一句话就可以了！

  <input type="text" name="autocomplete-ajax" value="请输入" id="autocomplete-ajax" style="position: absolute;  border-bottom :1px solid blue" />

Css样式必须按照要求写！

.autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; }

.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }

.autocomplete-selected { background: #F0F0F0; }

.autocomplete-suggestions strong { font-weight: normal; color: #3399FF; }

调用代码（ajax异步）

<span style="font-size:18px;">$('#autocomplete-ajax').autocomplete({
        serviceUrl: '/v2/Test',//请求路径
        type: 'post',//提交方式
        dataType: 'json',//返回文本格式
        paramName: 'query',//提交参数 就是html的文本框内容 query 写死
        //params:,//如果还需要其他的参数 就用这个属性
        onSelect: function (suggestion) {   //当选中后的方法
           },
        deferRequestBy:200,//停止输入后 开始请求 单位毫秒
    });</span>

c#  MVC action直接返回

 public ActionResult Test(string query)
    {   
		List<returnModel> rModel = new List<returnModel>();
         //固定json格式
		 return Json(new
                {
                    query = "query",//默认格式 必须有
                    suggestions = rModel//返回的是这样一个实体集合
                });

	}
	public class returnModel
    {
        public string value { get; set; }
        public string data { get; set; }
    } 

这个插件最麻烦的就是返回格式了 一定要按照文档规范去写，要不是既没有效果，也不报错，很不好调试的 。

js插件我就暂时不发了 百度一下很多的 不过一定要是JQuery的 不是jQueryUI的喔！！

https://github.com/devbridge/jQuery-Autocomplete 这个地址有详细的介绍

这儿就不多说了。