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. 下拉到最下面,找到“重置”即可
随机推荐
- 直接选择排序----java实现
直接选择排序思路: 从待排序数据中选择第一个假定为最小的下标,然后他后面的与他循环比较,得到真的最小值下标,然后最小值前的那一区段依次后移,并把最小值赋值给第一个元素.第二次时,假定第二个为最小,然后 ...
- jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览（模拟异步上传）
在web开发中,最纠结的一项就是文件上传,最近由于项目需要前后摸索了四天在这里分享给大家.如有不足,望指出!! 前台:jquery.easyui.html 后台:thinkphp 主要涉及语言:jqu ...
- Asp.NET MVC3 使用 SignalR 实现推(持续)
一,Persistent Connection 演示示例教程 1.实现server端代码 1),编写server PersistentConnection 代码 项目中 SignalR 文件夹下创建 ...
- [LeetCode202]Happy Number判断一个数是不是happy number
题目: Write an algorithm to determine if a number is "happy". A happy number is a number def ...
- .NET 4 并行（多核）编程系列之四 Task的休眠
原文:.NET 4 并行(多核)编程系列之四 Task的休眠 .NET 4 并行(多核)编程系列之四 Task的休眠 前言:之前的几篇文章断断续续的介绍了Task的一些功能:创建,取消.本篇介绍Tas ...
- 【Android基础】短信的发送
//Button的点击事件 @Override public void onClick(View v) { // 接受者电话号码 Uri uri = Uri.parse("smsto:123 ...
- 找出N之内的所有完数
时间限制: 10 Sec 内存限制: 128 MB 提交: 389 解决: 148 [提交][状态][讨论版] 题目描述 一个数如果恰好等于它的因子之和,这个数就称为"完数". ...
- Socket规划中的局域网内测试
前面提到的Socket信息及文件传输软件,如何测试和使用它? 事实上仅仅要推断client及server的局域网连通就可以. 1.Server在cmd下输入 ipconfig/all获得IP地址或者本 ...
- 基于RDP开源许可rdesktop基本介绍
**************************************************************************************************** ...
- object-c计划tips-添加到类对象属性
这个问题从网络包的内容,由于保密问题,我刚才所描述我的业余的想法. 基本的想法: 网络请求,我们应该能够使用基类BaseNetWork, 然后由派生类继承BaseNetWork,并实现一些特殊的方法. ...