最近用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的更多相关文章

  1. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  2. 四十七 Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.elastic.co/guide/en/elasticsearch/reference/current/se ...

  3. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  4. 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。

    示例代码: <input type="text" id="addr"/> <input type="text" hidde ...

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

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

  6. StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程)

    @ 目录 StringBoot整合ELK实现日志收集和搜索自动补全功能(详细图文教程) 一.下载ELK的安装包上传并解压 1.Elasticsearch下载 2.Logstash下载 3.Kibana ...

  7. javascript 实现类似百度联想输入,自动补全功能

    js  实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...

  8. Eclipse自动补全功能轻松设置 || 不需要修改编辑任何文件

    本文介绍如何设置Eclipse代码自动补全功能.轻松实现输入任意字母均可出现代码补全提示框.   Eclipse代码自动补全功能默认只包括 点"."  ,即只有输入”." ...

  9. 解决VS Code开发Python3语言自动补全功能不带括号的问题

    Visual Studio Code(以下简称VS Code)用来开发Python3,还是很便利的,本身这个IDE就是轻量级的,才几十兆大小,通过安装插件的方式支持各种语言的开发.界面也美美哒,可以在 ...

随机推荐

  1. 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 ...

  2. 全网最详细的Eclipse和MyEclipse里对于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】(图文详解)

    不多说,直接上干货! 首先,大家要明确,IDEA.Eclipse和MyEclipse等编辑器之间的新建和运行手法是不一样的. 全网最详细的MyEclipse里如何正确新建普通的Java web项目并发 ...

  3. PostgreSQL 数据类型

    数值类型 数值类型由两个字节,4字节和8字节的整数,4字节和8字节的浮点数和可选精度的小数.下表列出了可用的类型. www.yiibai.com Name Storage Size Descripti ...

  4. Linux系列教程(三)——Linux学习技巧

    前面我们讲了Linux系统的详细安装教程,大家跟着教程一步一步的操作,应该能完美的完成安装.那么这篇博客跟大家聊聊如何来学习Linux. 1.工欲善其事必先利其器 ①.第一个问题:通过前面在虚拟软件中 ...

  5. filter listener interceptor的区别

    转自: http://www.cnblogs.com/shangxiaofei/p/5328377.html https://www.cnblogs.com/jinb/p/6915351.html 一 ...

  6. 前端回顾:2016年 JavaScript 之星

    JavasScript社区在创新的道路上开足了马力,曾经流行过的也许一个月之后就过时了.2016已经结束了.你可能会想你是否错过一些重要的东西?不用担心,让我们来回顾2016年前端有哪些主流.通过比较 ...

  7. hadoop之editlogs和fsimage

    一.概述 hadoop的namenode和secondarynamenode: 1.   namenode负责 负责客户端请求的响应 元数据的管理(查询,修改) 2.    元数据管理 namenod ...

  8. tar命令的使用方法

    tar [-cxtzjvfpPN] 文件与目录参数说明:-c :建立一个打包文件:-x :解开一个打包文件:-t :查看 tar包里面的文件:-z :打包后用gzip压缩,生成.tar.gz文件:-j ...

  9. [SHOI2009] 会场预约

    Description 题意:支持操作: 按顺序在数轴上插入一条线段,删除并询问所有与这条线段有交的线段个数. 询问当前数轴上一共有多少条线段. Solution 想做了很久的题=.= 观察到和线段\ ...

  10. httpd配置文件httpd.conf规则说明和一些基本指令

    apache httpd系列文章:http://www.cnblogs.com/f-ck-need-u/p/7576137.html 本文主要介绍的是httpd的配置文件,包括一些最基本的指令.配置规 ...