<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery简单的检索框-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
}
ul li {
list-style:none;
}
a {
text-decoration:none;
}
.box {
width:600px;
}
.box1 {
width:300px;
height:auto;
margin:30px 70px;
float:left;
position:relative;
}
.box1 .inputCont {
width:200px;
height:36px;
line-height:36px;
position:absolute;
top:0;
left:0;
}
.box1 #dynamicUl {
width:200px;
height:auto;
border:1px solid yellow;
position:absolute;
left:0;
top:40px;
}
.box1 #dynamicUl li {
width:200px;
height:36px;
line-height:36px;
border-bottom:1px solid #ccc;
}
.box2 {
width:200px;
height:auto;
float:right;
margin-top:-30px;
}
.box2 #data {
width:200px;
height:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<input type="text" placeholder="请输入手机号" class="inputCont">
<ul id="dynamicUl">
</ul>
</div>
<div class="box2">
<h3>这个相当于数据库</h3>
<ul id="data">
<li>1</li>
<li>22</li>
<li>123</li>
<li>13571</li>
<li>111</li>
</ul>
</div>
</div><script>
$(function() {
var arr = [];
$(‘#data‘).children().each(function() {
var liText = $(this).text();
arr.push(liText);
});
$(‘.inputCont‘).on(‘keyup‘, function() {
$(‘#dynamicUl‘).find("li").remove();
$(‘#dynamicUl‘).show();
var inputCont = $(‘.inputCont‘).val();
for (var i = 0; i < arr.length; i++) {
if ((arr[i].indexOf(inputCont)) != -1) {
$(‘#dynamicUl‘).append($(‘<li onclick="removeUl(this)">‘ + arr[i] + ‘</li>‘));
}
}
})
$(‘#dynamicUl‘).on(‘click‘, ‘li‘, function() {
$(‘.inputCont‘).val($(this).text());
})
removeUl = function() {
$(‘#dynamicUl‘).hide();
}
})</script>
</body>
</html>
jquery 简单检索框
时间： 2024-08-01 02:44:58
jquery 简单检索框的相关文章
基于Jquery 简单实用的弹出提示框
引言: 原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考. 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d
js/jquery获取文本框的值与改变文本框的值
我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtbox2").value=document.getElementById("txtbox").value; //获取文本框1的值,并赋值给文本框2}</script> <table width="500" border="0"
jQuery简单表单验证效果
jQuery简单表单验证效果:只要有表单的地方,基本都会有表单验证,下面就结合实例简单介绍一下最简单的表单验证,如何防止填写的表单内容为空.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <tit
jquery简单案例
昨天写了一篇关于jquery选择器的学习的记录,后边发现关于jquery的学习不能只依靠简单的文档,必须动手写出一些实际的东西,这样会学习的更好,今天呢,就给大家带来利用jquery实现文字和图片提示的效果. jquery文字提示 先看下效果: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>
Qt之自定义检索框
1.效果展示 今天这篇文章主要讲解的是自定义搜索框,不仅仅支持搜索,而且可以支持搜索预览,具体请看效果图1.网上也有一些比较简单明了的自定义搜索框,比如Qt之自定义搜索框,讲的也比较详细,不过本文的侧重点不仅仅是搜索,而且包括了检索功能.有兴趣的小伙伴可以看下步骤3的思路讲解. 图1 自定义搜索框 2.功能分析 这个自定义搜索框支持输入一定的数据源,然后通过检索窗口进行搜索数据,匹配到的数据会优先展示到预览下拉框,预览窗口支持hover高亮整行.仔细阅读demo源码的同学可能就会发现其实这个搜搜
基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://github.com/Ethan-Xie/message 实例 通过此此插件可以为提示栏添加自动/点击消失的功能 用法 需引入message.css与message.js <link rel="stylesheet" href="message.css"> &l
jQuery监控文本框事件并作相应处理的方法
本文实例讲述了jQuery监控文本框事件并作相应处理的方法.分享给大家供大家参考.具体如下: //事情委托 $(document) .on('input propertychange', '#query', function(){ var input = $(this).val(); show(input); }); var show = function(txt){ var info = '监听:<b>' + txt + '</b><br /><
jQuery复选框全选/取消全选
jQuery复选框 注意jquery版本的更新兼容问题 使用兼容1.6+所有版本 $("#selAll").on("click", function () { if($("#selAll").prop("checked") == true){ $("input[id='iid']").each(function(){ $(this).prop("checked", true); });
JQuery 下拉框左右移动
JQuery下拉框左右移动 触发点击按钮时间 然后通过$("#one option:selected")获取目标的下拉框所选中的值 然后把选中的添加到你所要的下拉框中 同时要把原来下拉框的值删除 代码可以一句搞定 $("#one option:selected").appendTo("#two") 要注意的是: append()与appendTo()方法的区别. append(content|fn)向每个匹配的元素内部追加内容. append