输入字段 简单自动完成插件 jQuery自动完成精简版

  • 源码大小:12.68KB
  • 所需积分:1积分
  • 源码编号:19JP-3321
  • 浏览次数:657次
  • 最后更新:2023年05月31日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

一个轻量级且非常简单的jQuery自动完成插件,在输入字段时显示建议下拉列表。

如果你想在网站上搜索内容时节省访问者的时间和精力,那么这非常有用。

更多功能:

  • 从JS数组中获取建议。
  • 有或没有图像。
  • 支持模糊搜索。
  • Blazing快速且易于实施。

如何使用它:

1.在页面上包括jQuery库和jQuery自动完成插件。

  1. <!-- jQuery Is Required -->
  2. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  3.  
  4. <!-- autocomplete-lite Plugin -->
  5. <script src="/path/to/src/autocomplete-lite.js"></script>
  6.  
  7. <!-- With Image Support -->
  8. <script src="/path/to/src/autocomplete-lite-img.js"></script>

2.在JS数组中定义你的建议列表,如下所示:

  1. // country list
  2. var country_list = ["Afghanistan", "Albania", "Algeria", ...];

3.将图像附加到建议中。要求autocomplete-lite-img.js自动完成.

  1. // flags
  2. var country_flags = ["1.jpg", "2.jpg", "3.jpg", ...];

4.在目标输入字段上初始化插件,并按如下方式传递自动完成列表:

  1. <input type="text" id="country" autocomplete="off" autocorrect="off"/>
  1. // with no images
  2. $('#country').autocomplete_init(country_list);
  3.  
  4. // with images
  5. $('#country').autocomplete_img_init({
  6. items: country_list,
  7. images: ccountry_flags,
  8. callback: function callback(elem, index){
  9. alert("You selected " +elem.val() + '. Item index : ' + index);
  10. }
  11. });

预览截图