当前位置:Gxlcms > JavaScript > 原生js实现autocomplete插件_javascript技巧

原生js实现autocomplete插件_javascript技巧

时间:2021-07-01 10:21:17 帮助过:18人阅读

在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花大量时间调试兼容性。但是出于学习的目的,你可以利用闲暇时间,自己动手写写,看一些原生js的东西,根据自己的思路做插件,这样能提高水平。
说到autotemplete,好多人都用过,引用autotemplete.js,然后就可以实现在输入框输入值的时候提示下拉选项,类似于百度搜索框那种提示功能,下面就来说说自己的思路。
为输入框添加input事件
1.input事件兼容性代码如下:

input事件和其他的事件不一样,低版本的ie不支持input事件,只能用propertychange事件,高版本的ie和w3c标准浏览器支持input事件
2.输入事件触发的时候获取数据
这里数据有两种形式,一种是直接设置的对象数组,一种是ajax请求返回数据
这时候我们需要一个ajax请求函数,这里写了一个get请求

3. ajax请求成功,且有数据的时候创建下拉框并在下拉框中追加选项 ////创建下拉Div
创建下拉框代码:

追加选项代码:

上面说的是主要的几步思路,现在看一下怎么将这些代码封装到一个对象中,让它成为插件。这时候我们用到匿名闭包:


主体的代码添加好了,我们把具体的实现代码展示出来:

下面是使用的代码

页面调用

后台代码如下,这里我用的是mvc

public JsonResult Test4(string  name)
{
  var list=new List();
  list.Add(new Student { id="1",name="aaaaa"});
  list.Add(new Student { id = "2", name = "aacc" });
 
  list.Add(new Student { id = "3", name = "aabb" });
  list.Add(new Student { id = "4", name = "bbcc" });
 
  if (!string.IsNullOrEmpty(name))
  {
    list = list.Where(p => p.name.Contains(name)).ToList();
  }
  return Json(list,JsonRequestBehavior.AllowGet);
}
 

现在基本的功能实现和调用讲完了,从开始到最后的过程是比较麻烦的,每个方法都是一步步实现,没有引用其他的库,要考虑到各个浏览器的兼容性。

以上就是本文的全部内容,希望对大家的学习有所帮助。

人气教程排行