jQuery实现用户输入自动完成功能

jQuery实现用户输入自动完成功能

利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。

1.最简单的用户输入自动完成




  
  jQuery UI Autocomplete - Default functionality
  
  
  
  



2 使用远程数据源自动完成

Auto-complete插件不光可以实现本地数据源的自动完成,也可以读取远程的数据源,列如实现从服务器端读取数据源信息。
通过将服务器数据缓存到浏览器中,获取的数据源首先保存在cache变量中。

  $(function() {
    //自定义缓存变量
    var cache = {};
    //自动完成插件函数
    $("#tags").autocomplete({
      //定义用户最少输入的字符数
      minLenght: 2,
      source: function(request, response){//定义远程获取数据源函数
    var term = request.term;//定义用户请求信息变量
    if(term in cache) {//判断请求数据是否存在缓存中
      response(cache[term]);//真,从缓存中读取数据
      return;
    }
    $.getJSON('data.json', request, function(data, Status, xhr) {
      cache[term] = data.result;//缓存远程数据
      response(data.result);
    });
      }
    });
  });

你可能感兴趣的:(jquery,jquery)