html:

@*输入框*@
<div>
<input type="text" style="width: 85%; height: 34px;" onkeyup="InputChange(this)" id="txtInput">
</div>
@*模拟下拉框*@
<div class="divselect" id="dpSelect"> </div>

css:

/*选择框效果*/
.divselect {
float: left;
position: relative;
z-index:;
background: #fff;
display: none;
width: 85%;
}
.divselect ul {
padding:;
margin:;
border: 1px solid #E4E4E4;
background-color: #ffffff;
position: absolute;
z-index:;
margin-top: -1px;
width: 100%;
overflow: auto;
max-height: 200px;
}
.divselect ul li {
list-style-type: none;
cursor: pointer;
height: 24px;
line-height: 24px;
}
.divselect ul li:hover {
background: #ccc;
}

js:

<script type="text/javascript">
//点击模拟下拉框以外的地方 下拉框消失
$(document).bind('click', function (e) {
var e = e || window.event; //浏览器兼容性
var elem = e.target || e.srcElement;
while (elem) { //循环判断至跟节点,防止点击的是div子元素
if (elem.id && elem.id == 'dpSelect') {
return;
}
elem = elem.parentNode;
}
$('#dpSelect').css('display', 'none'); //点击的不是div或其子元素
}); //用文本框onkeyup事件触发InputChange方法 InputChange方法判断文本框文字是否改变 文字改变则触发SearchName方法
var sOldValue;
sOldValue = "";
function InputChange(arg) {
var vNewValue = $(arg).val();
if (sOldValue != vNewValue) {
//根据条件查询结果并给下拉框动态赋值
SearchName(arg);
sOldValue = vNewValue;
}
}
function SearchName(arg) {
var name = $(arg).val();
//如果搜索框为空 则返回false
if (name == "") {
$("#dpSelect").attr("style", "display:none");
return false;
}
else {
$("#dpSelect").attr("style", "display:block");
}
//获取数据 并给下拉框动态赋html
$.ajax({
type: "post",
url: "......",
data: { name: name },
dataType: "",
async: false,
success: function (data) {
var strs = "";
strs += "<ul>";
for (var i = 0; i < data.length; i++) {
strs += '<li onclick="SetValue(this)">' + data[i] + '</li>';
}
strs += "</ul>";
$("#dpSelect").html(strs);
},
error: function () {
alert("查询出错");
}
}); }
//点击模拟下拉框内选项后 给文本框赋值 关闭下拉框
function SetValue(arg) {
var value = $(arg).text();
$("#txtInput").val(value);
$("#dpSelect").attr("style", "display:none");
}
</script>

jQuery+css模拟下拉框模糊搜索的实现的更多相关文章

  1. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  2. 项目总结12:bootstrap-select下拉框模糊搜索

    bootstrap select下拉框模糊搜索 关键字 bootstrap-select 下拉框模糊搜索 正文(直接上源码) <%@ page language="java" ...

  3. JS模拟下拉框select

    最近做的一个项目有下拉框 同事都是用的是美化控件,但是用美化控件当然是好 但是网上找的一个控件不知道扩展性怎么样?对以后的维护会不会造成有影响?比如我想增加一个功能或者减少一个功能会不会影响?还有就是 ...

  4. jQuery之双下拉框

    双下拉框要实现的效果,实际上就是左边下拉选择框里的内容,可以添加到右边,而右边同理.写了个简单的例子,来说明一下. 代码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  5. div模拟下拉框

    1.模拟下拉框.点击文本框在文本框下面显示一个层divList,点击divList以外的任何地方,关闭divList层 document.body.onclick = function (e) { e ...

  6. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

  7. jQuery操作select下拉框的text值和value值的方法

    1.jquery获取当前选中select的text值 $("#select1").find("option:selected").text(); 2.jquer ...

  8. js&jquery 获取select下拉框的值、文本内容、自定义属性

      js&jquery 获取select下拉框的值.文本内容.自定义属性 CreationTime--2018年7月2日09点22分 Author:Marydon html <selec ...

  9. JQuery操作select下拉框

    JQuery操作select下拉框 获取Select选择的Text和Value $("#select_id").change(function(){//code...}); //为 ...

随机推荐

  1. B. Clique Problem(贪心)

    题目链接: B. Clique Problem time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  2. SVG 总结

    //文件名:11.svg<?xml version="1.0" encoding="UTF-8" ?> <!--XML NameSpace:名 ...

  3. 你所不知道的 Java 之 HashCode

    之所以写HashCode,是因为平时我们总听到它.但你真的了解hashcode吗?它会在哪里使用?它应该怎样写? 相信阅读完本文,能让你看到不一样的hashcode. 使用hashcode的目的在于: ...

  4. 10.排序数组中和为给定值的两个数字[Find2NumbersWithGivenSum]

    [题目] 输入一个已经按升序排序过的数组和一个数字,在数组中查找两个数,使得它们的和正好是输入的那个数字.要求时间复杂度是O(n).如果有多对数字的和等于输入的数字,输出任意一对即可. 例如输入数组1 ...

  5. InpOut32 CSharpExample.cs hacking

    /************************************************************************************ * InpOut32 CSh ...

  6. linux之epoll

    1. epoll简介 epoll 是Linux内核中的一种可扩展IO事件处理机制,最早在 Linux 2.5.44内核中引入,可被用于代替POSIX select 和 poll 系统调用,并且在具有大 ...

  7. DbEntry 访问Access2010数据库

    在用DbEntry访问Access2010的时候报错如下: 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序 解决方案: 安装AccessDatabaseEngine组 ...

  8. as3 htmlText 的bug

    as的文本框  会把连续的英文当作一个单词处理 如果是在已有内容的行后 超过宽度就会换行 左边的用了英文冒号直接被当成完整的单词右边的被当成了 jj5jk : mmmmmmmmmm 三个单词

  9. dubbox部署到jdk1.7环境,启动:java.lang.NoSuchMethodError: java.util.concurrent.ConcurrentHashMap.keySet()

    本地用jdk1.8编译的服务提供端war包,部署到环境报错了: INFO: Initializing Spring root WebApplicationContext [16/08/17 05:14 ...

  10. rmmod: can't change directory to '/lib/modules': No such file or directory

    [root@iTOP-4412]# mount /dev/sda1 /mnt/udisk/ [root@iTOP-4412]# insmod /mnt/udisk/linux/hello.ko  [ ...