java_前端_autocomplete_搜索框自动匹配提示
效果图：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> title </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
.demoHeaders {
margin-top: 2em;
}
#dialog-link {
padding: .4em 1em .4em 20px;
text-decoration: none;
position: relative;
}
#dialog-link span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 50%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.fakewindowcontain .ui-widget-overlay {
position: absolute;
}
select {
width: 200px;
}
</style>
<link href="jquery-ui.css" rel="stylesheet">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
</HEAD> <BODY> <!-- Autocomplete -->
<h2 class="demoHeaders">Autocomplete</h2>
<div>
<input id="autocomplete" title="type "a"">
</div> </BODY>
</HTML>
<script> var availableTags = [
"苹果",
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala"
]; $( "#autocomplete" ).autocomplete({
source: availableTags
}); </script>
全部源码：
http://pan.baidu.com/s/1ntwVDGX
java_前端_autocomplete_搜索框自动匹配提示的更多相关文章
- jQuery的搜索关键词自动匹配插件
相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系 ...
- jQuery 下拉框输入匹配提示选项
做页面输入时,为方便输入和提高用户体验,常用下拉框,当下拉选项数据很多时,也不易找到想要的选项,这时,提供一种下拉框输入匹配提示选项,如下: 图示
- Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...
- typecho博客组插件:openSug.js百度搜索框下拉提示免费代码
Typecho候选搜索增强插件:安装openSug插件即可获得带有“搜索框提示”功能的搜索框,让Typecho搜索更便捷! 支持百度.谷歌.雅虎.Yandex.360好搜.UC神马.酷狗.优酷.淘 ...
- 搜索框下面显示提示数据（数据是ajax读取）
1.前台页面 <div style="margin: 0 auto"> <input type="text" id="wenxian ...
- Jquery 搜索框自动提示
为文本框增加自动提示下拉功能,比如输入 1,则从后台数据库查询出包含1 的字段,在文本框增加下拉列表供用户选择 ajax 返回数据为搜索查询字段的json集合 <script src=" ...
- jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...
- 使用Bootstrap typeahead插件实现搜索框自动补全的配置参数。
示例代码: <input type="text" id="addr"/> <input type="text" hidde ...
- win10 搜索框输入没提示
1.点击win, 手动在应用里找到Cortana(小娜) 2. 点右键->更多->应用设置,进入到下面的界面 3. 下拉到最下面,找到“重置”即可
随机推荐
- （ArcGIS API For Silverlight ）QueryTask 跨层查询，和监控完整的查询！
(ArcGIS API For Silverlight )QueryTask 跨层查询,和监控完整的查询! 直接在源代码: 定义全局变量: int index=0; /// & ...
- 让c#的exe只要被修改就无法运行，支持混淆和数字证书
原文:让c#的exe只要被修改就无法运行,支持混淆和数字证书 首先用sdk的sn工具或者makecert工具生成公钥和密钥,推荐makecert,做自己的证书,我做了一个受信任的根证书放在受信任的根证 ...
- 动软.NET 分页存储过程UP_GetRecordByPage
1, ------------------------------------ --用途:支持任意排序的分页存储过程 --说明: ----------------------------------- ...
- 一个简单的RPC框架
一个 系统模型 二.数据库代码实现 1. mkdir database cd database vim dbInit.c /* * * Database Init tool * */ #include ...
- HDU 4513 哥几个系列故事——形成完善II manacher求最长回文
标题来源:哥几个系列故事--形成完善II 意甲冠军:中国 思维:在manacher断 保证非严格递减即可了 #include <cstdio> #include <cstring&g ...
- 使用JavaScript检测浏览器
假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到. View Demo Download Source from GitHub JavaScript有一个navigator的标 ...
- (hdu step 7.1.5)Maple trees(凸包的最小半径寻找掩护轮)
称号: Maple trees Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- 使用智能移动设备访问Ossim制
使用智能移动设备访问Ossim制 下面我们用iPad,iPhone通路ossim效果系统. 高清视频:http://www.tudou.com/programs/view/TikMZ1z1ELw ip ...
- WPF学习（8）数据绑定
说到数据绑定,其实这并不是一个新的玩意儿.了解asp.net的朋友都知道,在asp.net中已经用到了这个概念,例如Repeater等的数据绑定.那么,在WPF中的数据绑定相比较传统的asp.net中 ...
- Windows Phone 选择器
using Microsoft.Phone.Controls; using Microsoft.Phone.Tasks; using System; using System.Windows; nam ...