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
类似百度搜索下拉框
最新推荐文章于 2022-03-18 21:31:02 发布
这篇博客介绍了一个使用JavaScript(jQuery)实现的类似百度搜索下拉框的功能。通过监听键盘事件,如上、下箭头键和回车键,来动态改变下拉列表中选项的高亮和选择,并在回车键被按下时处理搜索提交。同时,博客还展示了如何调整下拉列表的样式和位置,使其与搜索框匹配。
摘要由CSDN通过智能技术生成