最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能，原先用jQuery-ui，结果jQuery-ui库太大，所以考虑用其他插件，最终选择使用autocomplete.js，控件简单用着方便。留下记录

源码如下：

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>Input Autocomplete Suggestions Demo</title>
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <script type="text/javascript" src="js/codedata.js"></script>
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
  <script type="text/javascript" src="js/currency-autocomplete.js"></script>
</head>

<body>
  <div id="w">
    <div id="content">
      <h1>World Currencies Autocomplete Search</h1>
      <p>Just start typing and results will be supplied from the JavaScript. Check out <a href="https://github.com/devbridge/jQuery-Autocomplete">jQuery Autocomplete</a> on Github.</a></p>
      
      <div id="searchfield">
        <form><input type="text" name="currency" class="biginput" id="autocomplete"></form>
      </div><!-- @end #searchfield -->
      
      <div id="outputbox">
        <p id="outputcontent">Choose a currency and the results will display here.</p>
      </div>
    </div><!-- @end #content -->
  </div><!-- @end #w -->
</body>
</html>

具体源码地址   https://github.com/longma8586/jQueryAutoCompleteDemo

转载于:https://www.cnblogs.com/longma8586/p/8807647.html

jQuery搜索框自动补全功能插件实现-autocomplete.js相关推荐

  1. 微信小程序搜索框自动补全功能

    ▶动态效果图◀ ▶效果涉及到的input属性◀ focus     Boolean     false     获取焦点      bindinput     EventHandle          ...

  2. 搜索框自动补全(模糊匹配)功能实现

    本地实现了一个搜索框自动补全的小功能,在JQuery UI的autocomplete插件的基础上,加入了自己的业务代码,贴出来回顾一下,同时可以给大家一个参考 首先贴出的是JQuery Ui 的自动补 ...

  3. Elasticsearch 分布式搜索引擎 -- 自动补全（拼音分词器、自定义分词器、自动补全查询、实现搜索框自动补全）

    文章目录 1. 自动补全 1.1 拼音分词器 1.2.1 自定义分词器 1.2.2 小结 1.2 自动补全 1.3 实现酒店搜索框自动补全 1.3.1 修改酒店映射结构 1.3.2 修改HotelDo ...

  4. 纯js实现搜索框自动补全

    纯js实现搜索框自动补全 开发语言:HTML+CSS+JS 编辑器:VSCode 构建思路:建立两个div,一个用于输入和搜索,一个用于展示,用于展示的初始状态为隐藏的.后面当有键盘输入事件时就显示, ...

  5. html 输入框自动缩短 一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...

    JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...

  6. html 搜索框 自动补全,自动完成的搜索框javascript实现

    自动完成的搜索框javascript实现 2019-01-04 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了自动完成的搜索框javascript实现,编程之家 ...

  7. 去掉input密码框自动补全功能

    <input name="password" autocomplete="off" hidden> <input type="pas ...

  8. html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能

    记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...

  9. Idea代码自动补全！插件推荐：Codota，再也不用担心写不出代码了。

    前言 最近,有小伙伴推荐给D哥一款IDEA插件,叫我一定得给大家分享一下,简直太好用了~ 这款插件解决的痛点:当你不知道一个类该怎么用的时候,它能帮你快速找到想要的实例代码. 群里有不少同学说,&qu ...

最新文章

  1. TensorFlow高层次机器学习API (tf.contrib.learn)
  2. 常用10种PHP编辑器下载
  3. QT的QStatusBar类的使用
  4. [elk]logstash grok原理
  5. .Net Core3.0使用gRPC
  6. mysql80重置密码_MySQL8.0修改密码问题
  7. mysql 索引 lt =_MySQL索引相关
  8. MySQL学习笔记之MySQL安装详解
  9. Excel中快速调整行高或列宽为适合内容显示的长度
  10. AttributeError: ‘Model‘ object has no attribute ‘predict_classes‘ 的解决方案
  11. Block实现iOS回调
  12. Struts2学习笔记（六） 结果（Result）(上)
  13. Illustrator 教程，如何在 Illustrator 中添加图像？
  14. python mmap_python标准库基础之mmap：内存映射文件
  15. VS2015 自动代码补全
  16. 三维绘图plot3命令ezplot3命令三维网格命令mesh命令
  17. secondary namenode详解
  18. 如何选取最佳前缀索引长度
  19. Nlp SBD 文本断句 包含中文 和英文断句
  20. Unable to attach or mount volumes ... timed out waiting for the condition

热门文章

  1. Spring AOP + Redis解决重复提交的问题
  2. 2022-2028年中国电子灌封胶行业市场研究及前瞻分析报告
  3. 本机无法访问虚拟机上的nignx
  4. 第三天：Vue的组件化
  5. Minkowski修剪
  6. 深度学习调用TensorFlow、PyTorch等框架
  7. 深度学习:梯度下降算法改进
  8. TCP/UDP对比总结
  9. C++ set 的使用
  10. Androidx CoordinatorLayout 和 AppBarLayout 实现折叠效果(通俗的说是粘性头效果)