jquery-autocompleter使用介绍

jquery
jquery
发布日期:   2016-04-17

本文分享使用jquery-autocompleter模板。
欢迎讨论和吐槽。

使用场景

在业务中遇到需求希望可以在输入框中输入游戏名称的一部分，然后自动补全出含游戏id-游戏名称的下拉选项供选择。

使用案列

  • 业务中的实现代码如下：
    var game_id_names = '';
   $.ajax({
       dataType:'json',
       url : 'URL',
       async:false,//这里选择异步为false，那么这个程序执行到这里的时候会暂停，等待
                   //数据加载完成后才继续执行
       success : function(data){
           for(var i=0;i
  • 这里分享一个可查看效果的代码样例：
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="mains.css">
  <script type="text/javascript" src="http://img.qidian.com/js/jquery-2.1.1.min.js"></script>
  <script src="jquery.autocompleter.js"></script>
</head>
<body>
测试输入框<input id="test-input" placeholder="请输入水果" maxlength="40" />
</body>
<script >
  $(function(){
      var fruits = eval("[{'label':'西瓜'},{'label':'火龙果'},{'label':'西瓜2'},{'label':'西瓜3'}, {'label':'西瓜4'},{'label':'苹果'},{'label':'苹果7'}]");
      $('#test-input').autocompleter({
          // marker for autocomplete matches
          highlightMatches: true,
          // object to local or url to remote search
          source: fruits,
          // custom template
          template: '{{ label }}',
          // show hint
          hint: true,
          // abort source if empty field
          empty: false,
          // max results
          limit: 20,
      });
  });
</script>
</html>

使用交流

使用autocompleter模板需要引入jquery.autocompleter.min.js；
引入jquery.autocompleter.css（不然效果难看）；

效果还是不错的，已上实例是非常基本简单的使用，还有更方便、强大的使用方式希望一起交流。

参考地址

jQuery自动完成插件autocompleter

文章作者: Xudong Jiang
文章链接: http://localhost:4000/2016/04/17/jquery-autocompleter-shi-yong-jie-shao/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Xudong Jiang !
jquery
赏
 上一篇
php文件输出空行 php文件输出空行
本文分享一次开发中遇到的文件输出空行的问题以及原因。欢迎讨论和吐槽。 文件输出空行的问题一个公共类，用来输出json数据，只要调用这个类中的方法输出，在输出json数据前面多出空行 ###问题原因和解决方法 使用之前的版本没有这个问题，经
2016-06-17 php
问题记录 php
下一篇 
git-代码开发发布流程 git-代码开发发布流程
本文讨论业务接触到的git发布流程，在此记录和分享。欢迎讨论和吐槽。 方案1这是在我第一家公司的经验，刚开始我们团队的发布系统是内部的发布系统，而后使用的是jenkins发布。以下流程为文字描述，希望可以描述清楚。公司开发分本地，测试，预发
2016-04-17 git
git
  目录