通过键盘上下键和鼠标移入移出 JS事件，控制候选词的选择项
前言
搜索框兼容ie8
通过键盘上下键和鼠标移入移出 JS事件，控制候选词的选择项
一、html
代码如下（示例）：
<div class="header-middle">
<input type="text" id="txt" placeholder="请输入搜索内容" />
</div>
<ul id="keywords"></ul>
二、js
代码如下（示例）：
//搜索框
var keywords = ["java", "知识管理", "知识管理系统", "钟邓明", "创建时间", "阅读数", "知识分子", "知识共创", "图谱", "知识管理国家标准", "知识量化", "员工知识分享", "员工知识", "查看图片", "排序", "时间排序", "知识图谱", "项目名称"];
// 1.1 获取事件源：input#txt
var text = document.querySelector('#txt');
var key = document.querySelector('#keywords');
console.log(123, text);
/* 对象级别插件扩展 */
$.fn.extend({
oninput: function (callback) {
var el = $(this);
/* 当前浏览器是否支持 oninput 事件 */
if ("oninput" in el.get(0)) {
el.on("input", function () {
callback && callback($(this).val());
});
} else {
/* IE独有属性，IE9 以下版本使用 */
el.on("propertychange", function () {
callback && callback($(this).val());
});
}
}
});
// 1.2 确定事件类型：oninput
$("#txt").oninput(function () {
//绑定用户输入事件
// 1.3 获取到用户当前输入到数据：关键字
console.log(1212);
var value = $("#txt").attr("value")
console.log(value);
// 1.4 新的关键字产生：原来的结果就需要清理（将ul中的内容清空）
key.innerHTML = '';
// 2. 去数组中匹配：遍历数组，取出每个词条
if (!Array.prototype.forEach) {
Array.prototype.forEach = function forEach(callback, thisArg) {
var T, k;
if (this == null) {
throw new TypeError("this is null or not defined");
}
var O = Object(this);
var len = O.length >>> 0;
if (typeof callback !== "function") {
throw new TypeError(callback + " is not a function");
}
if (arguments.length > 1) {
T = thisArg;
}
k = 0;
while (k < len) {
var kValue;
if (k in O) {
kValue = O[k];
callback.call(T, kValue, k, O);
}
k++;
}
};
}
keywords.forEach(function (item) {
console.log('我进来了吗');
// 2.1 匹配到：关键字在词条中存在 词条.indexOf('关键字') != -1\
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
for (var i = 0; i < this.length; i++) {
if (this[i] == obj) {
return i;
}
}
return -1;
}
}
if (item.indexOf(value) != -1) {
$("#keywords").addClass("keywords")
// 3. 将匹配到到数据放到li中，将li放到ul中：创建li：document.createElement('li') ，li.innerText = 词条 将li放到ul 中：ul.appendChild(li)
// 3.1 创建li
var lis = document.createElement('li');
// 3.2 给li增加数据：词条
lis.innerText = item;
// 3.3 将li放到ul中
key.appendChild(lis);
// 当鼠标移入，每个li的背景颜色
lis.onmouseover = function () {
//当鼠标移入取消是键盘事件的样式
$("#keywords>li").removeClass("Backgroud").css({
"background": "" });
lis.style.backgroundColor = '#b0b0b0';
//注意键盘的起始位是根据class开始的
lis.className = "Backgroud"
};
// 鼠标移出，li变回无色
lis.onmouseout = function () {
lis.style.backgroundColor = '';
};
// 3.6 li的点击事件
lis.onclick = function () {
// 将li里面的内容赋值给输入框
text.value = lis.innerText;
// 清空ul
key.innerHTML = '';
};
} else {
$("#keywords").removeClass("keywords")
}
});
})
//上下键 选择事件 searchBackgroud 为样式，只做标记，无实质样式，因为和其他样式不兼容，只能添加CSS
$(document).keydown(function (event) {
var text = document.querySelector('#txt');
var upDownClickNum = $("#keywords .Backgroud").length;
console.log(upDownClickNum);
//38:上 40:下
if (event.keyCode == 38) {
if (upDownClickNum < 1) {
$("#keywords li:last").css({
"background": "#b0b0b0" }).addClass("Backgroud");
} else {
$("#keywords .Backgroud").removeClass("Backgroud").css({
"background": "" }).prev().addClass("Backgroud").css({
"background": "#b0b0b0" });
}
stopDefault(event);//不阻止光标户向前移动
} else if (event.keyCode == 40) {
if (upDownClickNum < 1) {
$("#keywords li:first").css({
"background": "#b0b0b0" }).addClass("Backgroud");
} else {
$("#keywords .Backgroud").removeClass("Backgroud").css({
"background": "" }).next().addClass("Backgroud").css({
"background": "#b0b0b0" });
}
stopDefault(event);
}
upDownClickNum++;
if(event.keyCode==13){
var key = document.querySelector('#keywords');
var lis = document.querySelector(".Backgroud")
text.value =lis.innerText;
key.innerHTML=""
}
})
//阻止事件执行
function stopDefault(event) {
//阻止默认浏览器动作(W3C)
if (event && event.preventDefault) {
//火狐的 事件是传进来的e
event.preventDefault();
}
//IE中阻止函数器默认动作的方式
else {
//ie 用的是默认的event
event.returnValue = false;
}
}
总结
以上就是今天要讲的内容，本文仅仅简单介绍了搜索框，希望大家可以多给建议