类似百度搜索下拉框

这篇博客介绍了一个使用JavaScript(jQuery)实现的类似百度搜索下拉框的功能。通过监听键盘事件,如上、下箭头键和回车键,来动态改变下拉列表中选项的高亮和选择,并在回车键被按下时处理搜索提交。同时,博客还展示了如何调整下拉列表的样式和位置,使其与搜索框匹配。
摘要由CSDN通过智能技术生成

在这里插入图片描述

var fouce_li_num = -1;///默认没有选择任何下拉内容
var width_ = 326;//这里设置的是搜索框的宽度,目的为了与下面的列表宽度相同
var li_color = “#fff”;//默认的下拉背景颜色
var li_color_ = “#CCC”;//当下拉选项获取焦点后背景颜色
var agentname;
$(function() {
$(“input[name=agentname]”)
.keyup(
function(event) {
var keycode = event.keyCode;
if (delkeycode(keycode))
return;
agentname = $(this).val();//获取搜索值
var top_ = $(this).offset().top;//获搜索框的顶部位移
var left_ = $(this).offset().left;//获取搜索框的左边位移
if (keycode == 13) {//enter search
if (fouce_li_num >= 0) {
$(this)
.val(
$
.trim($(
“#foraspcn >li:eq(”
+ fouce_li_num
+ “)”)
.text()));
fouce_li_num = -1;
} else {
/当没有选中下拉表内容时 则提交form

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值