jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用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
jQuery搜索框自动补全功能插件实现-autocomplete.js的更多相关文章
- 第三百六十八节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...
- 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能
elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...
- jquery的输入框自动补全功能+ajax
jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端 内容参考网友文章写成,原博的链 ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- 去掉input密码框自动补全功能
<input name="password" autocomplete="off" hidden> <input type="pas ...
- StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)
@ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...
- javascript 实现类似百度联想输入，自动补全功能
js 实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...
- Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件
本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框. Eclipse代码自动补全功能默认只包括 点"." ,即只有输入”." ...
- 解决VS Code开发Python3语言自动补全功能不带括号的问题
Visual Studio Code(以下简称VS Code)用来开发Python3,还是很便利的,本身这个IDE就是轻量级的,才几十兆大小,通过安装插件的方式支持各种语言的开发.界面也美美哒,可以在 ...
随机推荐
- Centos 7 Asp.net core 使用QRCoder 报“Unable to load DLL 'gdiplus'"
环境: Centos7 .Net core 2.0 问题: 使用QRCoder 报“Unable to load DLL 'gdiplus'" 同 https://q.cnblogs.com ...
- 全网最详细的Eclipse和MyEclipse里对于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）
不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发 ...
- PostgreSQL 数据类型
数值类型 数值类型由两个字节,4字节和8字节的整数,4字节和8字节的浮点数和可选精度的小数.下表列出了可用的类型. www.yiibai.com Name Storage Size Descripti ...
- Linux系列教程（三）——Linux学习技巧
前面我们讲了Linux系统的详细安装教程,大家跟着教程一步一步的操作,应该能完美的完成安装.那么这篇博客跟大家聊聊如何来学习Linux. 1.工欲善其事必先利其器 ①.第一个问题:通过前面在虚拟软件中 ...
- filter listener interceptor的区别
转自: http://www.cnblogs.com/shangxiaofei/p/5328377.html https://www.cnblogs.com/jinb/p/6915351.html 一 ...
- 前端回顾：2016年 JavaScript 之星
JavasScript社区在创新的道路上开足了马力,曾经流行过的也许一个月之后就过时了.2016已经结束了.你可能会想你是否错过一些重要的东西?不用担心,让我们来回顾2016年前端有哪些主流.通过比较 ...
- hadoop之editlogs和fsimage
一.概述 hadoop的namenode和secondarynamenode: 1. namenode负责 负责客户端请求的响应 元数据的管理(查询,修改) 2. 元数据管理 namenod ...
- tar命令的使用方法
tar [-cxtzjvfpPN] 文件与目录参数说明:-c :建立一个打包文件:-x :解开一个打包文件:-t :查看 tar包里面的文件:-z :打包后用gzip压缩,生成.tar.gz文件:-j ...
- [SHOI2009] 会场预约
Description 题意:支持操作: 按顺序在数轴上插入一条线段,删除并询问所有与这条线段有交的线段个数. 询问当前数轴上一共有多少条线段. Solution 想做了很久的题=.= 观察到和线段\ ...
- httpd配置文件httpd.conf规则说明和一些基本指令
apache httpd系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 本文主要介绍的是httpd的配置文件,包括一些最基本的指令.配置规 ...