2023年6月21日发(作者：)
利⽤jQuery实现可输⼊搜索⽂字的下拉框先看效果
点击下拉框输⼊框时，⾃动显⽰下⾯的下拉列表，⽽且是根据输⼊框中输⼊的搜索添加，⾃动在后台查找，然后传到前台，展现页⾯。
⽤的的js：
复制代码 代码如下:var $xialaSELECT;
$(document).ready(function(){
initXialaSelect();
initSearch();
});
var temptimeout=null;
var query="";
function searchDev(key){
//if(key == "")return;
query=key;
clearTimeout(temptimeout);
temptimeout= setTimeout(findUnSaved, 500);
}
function findUnSaved()
{
//alert("dd");
//if(1==1)return;
$.ajax({
type: "post",
data:{'query':query},
url: path + "/",
success: function(data) {
xiala(data);
},
error: function(data) {
alert("加载失败，请重试！");
}
});
}
function initSearch()
{
//定义⼀个下拉按钮层，并配置样式(位置，定位点坐标，⼤⼩，背景图⽚，Z轴)，追加到⽂本框后⾯
$xialaDIV = $('
').css('position', 'absolute').css('left', $('#province').position().left + $('#province').width() - 15 +'px').css('top',$('#province').position().top + 4 + 'px').css('background', 'transparent url(../images/) no-repeat top left').css('height','16px').css('width',
'15px').css('z-index', '100');
$('#province').after($xialaDIV);
//⿏标进⼊修改背景图位置
$ver(function(){
$('background-position', ' 0% -16px');
});
//⿏标移出修改背景图位置
$ut(function(){
$('background-position', ' 0% -0px');
});
//⿏标按下修改背景图位置
$own(function(){
$('background-position', ' 0% -32px');
});
//⿏标释放修改背景图位置 $p(function(){
$('background-position', ' 0% -16px');
if($xialaSELECT)
$();
});
$('#province').mouseup(function(){
$('background-position', ' 0% -16px');
$();
});
}
var firstTimeYes=1;
//⽂本框的下拉框div
function xiala(data){
//first time
if($xialaSELECT)
{
$();
}
//定义⼀个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏
//定义五个选项层，并配置样式(宽度，Z轴⼀定要⽐下拉框层⾼)，添加name、value属性，加⼊下拉框层
$(data);
if(firstTimeYes == 1)
{
firstTimeYes =firstTimeYes+1;
}else{
$();
}
}
function initXialaSelect()
{
$xialaSELECT = $('
').css('position', 'absolute').css('overflow-y','scroll').css('overflow-x','hidden').css('border', '1pxsolid #809DB9').css('border-top','none').css('left', '125px').css('top', $('#province').position().top + $('#province').height() + 6 + 'px').css('width', $('#province').width() + 'px').css('z-index','101').css('width','152px').css('background','#fff').css('height','200px').css('max-height','600px');
$('#province').after($xialaSELECT);
//选项层的⿏标移⼊移出样式
$ver(function(event){
if ($().attr('name') == 'option') {
//移⼊时背景⾊变深，字⾊变⽩
$().css('background-color', '#000077').css('color', 'white');
$().mouseout(function(){
//移出是背景⾊变⽩，字⾊变⿊
$().css('background-color', '#FFFFFF').css('color', '#000000');
});
}
});
//通过点击位置，判断弹出的显⽰
$p(function(event){
//如果是下拉按钮层或下拉框层，则依然显⽰下拉框层
if ( == $(0) || == $(0)) {
$();
}
else {
//如果是选项层，则改变⽂本框的值
if ($().attr('name') == 'option') {
//弹出value观察
$('#nce').val($().html());
$('#d').val($().attr("d"));
//if seleced host then hidden the dev type
if($().attr("ass") == 3305)
{
$("#ype").hide(); $("#ost").val(1);
}else{
$("#ype").show();
$("#ost").val(-1);
}
}
//如果是其他位置，则将下拉框层
if ($('display') == 'block') {
$();
}
}
});
$();
}
var k = 1;
k = clicks;
function clicks()
{
if(k ==2){
k = 1;
if($xialaSELECT)
{
if ($('display') == 'block') {
$();
}
}
}else{
k = 2;
}
}
复制代码 代码如下:.cba {
width: 150px;
height: 18px;
}
.selectlala {
text-align: left;
line-height: 20px;
padding-left: 5px;
width: 147px;
font-family: Arial,verdana,tahoma;
height: 20px;
}
2023年6月21日发(作者：)
利⽤jQuery实现可输⼊搜索⽂字的下拉框先看效果
点击下拉框输⼊框时，⾃动显⽰下⾯的下拉列表，⽽且是根据输⼊框中输⼊的搜索添加，⾃动在后台查找，然后传到前台，展现页⾯。
⽤的的js：
复制代码 代码如下:var $xialaSELECT;
$(document).ready(function(){
initXialaSelect();
initSearch();
});
var temptimeout=null;
var query="";
function searchDev(key){
//if(key == "")return;
query=key;
clearTimeout(temptimeout);
temptimeout= setTimeout(findUnSaved, 500);
}
function findUnSaved()
{
//alert("dd");
//if(1==1)return;
$.ajax({
type: "post",
data:{'query':query},
url: path + "/",
success: function(data) {
xiala(data);
},
error: function(data) {
alert("加载失败，请重试！");
}
});
}
function initSearch()
{
//定义⼀个下拉按钮层，并配置样式(位置，定位点坐标，⼤⼩，背景图⽚，Z轴)，追加到⽂本框后⾯
$xialaDIV = $('
').css('position', 'absolute').css('left', $('#province').position().left + $('#province').width() - 15 +'px').css('top',$('#province').position().top + 4 + 'px').css('background', 'transparent url(../images/) no-repeat top left').css('height','16px').css('width',
'15px').css('z-index', '100');
$('#province').after($xialaDIV);
//⿏标进⼊修改背景图位置
$ver(function(){
$('background-position', ' 0% -16px');
});
//⿏标移出修改背景图位置
$ut(function(){
$('background-position', ' 0% -0px');
});
//⿏标按下修改背景图位置
$own(function(){
$('background-position', ' 0% -32px');
});
//⿏标释放修改背景图位置 $p(function(){
$('background-position', ' 0% -16px');
if($xialaSELECT)
$();
});
$('#province').mouseup(function(){
$('background-position', ' 0% -16px');
$();
});
}
var firstTimeYes=1;
//⽂本框的下拉框div
function xiala(data){
//first time
if($xialaSELECT)
{
$();
}
//定义⼀个下拉框层，并配置样式(位置，定位点坐标，宽度，Z轴)，先将其隐藏
//定义五个选项层，并配置样式(宽度，Z轴⼀定要⽐下拉框层⾼)，添加name、value属性，加⼊下拉框层
$(data);
if(firstTimeYes == 1)
{
firstTimeYes =firstTimeYes+1;
}else{
$();
}
}
function initXialaSelect()
{
$xialaSELECT = $('
').css('position', 'absolute').css('overflow-y','scroll').css('overflow-x','hidden').css('border', '1pxsolid #809DB9').css('border-top','none').css('left', '125px').css('top', $('#province').position().top + $('#province').height() + 6 + 'px').css('width', $('#province').width() + 'px').css('z-index','101').css('width','152px').css('background','#fff').css('height','200px').css('max-height','600px');
$('#province').after($xialaSELECT);
//选项层的⿏标移⼊移出样式
$ver(function(event){
if ($().attr('name') == 'option') {
//移⼊时背景⾊变深，字⾊变⽩
$().css('background-color', '#000077').css('color', 'white');
$().mouseout(function(){
//移出是背景⾊变⽩，字⾊变⿊
$().css('background-color', '#FFFFFF').css('color', '#000000');
});
}
});
//通过点击位置，判断弹出的显⽰
$p(function(event){
//如果是下拉按钮层或下拉框层，则依然显⽰下拉框层
if ( == $(0) || == $(0)) {
$();
}
else {
//如果是选项层，则改变⽂本框的值
if ($().attr('name') == 'option') {
//弹出value观察
$('#nce').val($().html());
$('#d').val($().attr("d"));
//if seleced host then hidden the dev type
if($().attr("ass") == 3305)
{
$("#ype").hide(); $("#ost").val(1);
}else{
$("#ype").show();
$("#ost").val(-1);
}
}
//如果是其他位置，则将下拉框层
if ($('display') == 'block') {
$();
}
}
});
$();
}
var k = 1;
k = clicks;
function clicks()
{
if(k ==2){
k = 1;
if($xialaSELECT)
{
if ($('display') == 'block') {
$();
}
}
}else{
k = 2;
}
}
复制代码 代码如下:.cba {
width: 150px;
height: 18px;
}
.selectlala {
text-align: left;
line-height: 20px;
padding-left: 5px;
width: 147px;
font-family: Arial,verdana,tahoma;
height: 20px;
}
发布评论