编写一个具有搜索提示的搜索框

作者：空城机

2022 年 7 月 22 日
本文字数：1197 字
阅读完需：约 4 分钟

这次来实现一个能够输入内容，显示提示下拉框的搜索框。

搜索框功能

能够输入国家名称全部或部分，出现搜索框的提示下拉框。

具体的数据没有放在数据库中，用 JavaScript 写了一个数组，从这个数组中的国家名称中找就可以了

实现过程

首先先编写一个 HTML 页面，在页面中将 input 的搜索框编写好，先不用 css 进行修饰

然后使用 css 进行修饰，这里的样式按照自己喜好写，甚至不写也没有关系

在编写 JavaScript 时，我使用原生的 JavaScript

先给定所有的国家数据

var arr = ["中国","日本","美国","俄罗斯","加拿大","英国","澳大利亚","西班牙","德国","孟买加","阿拉伯","印度","印度尼西亚"];

复制代码

然后在获取 input 输入框的输入内容

var search = document.getElementsByClassName("blue-input")[0];text内容 = search.value

复制代码

我需要实时对输入框中内容进行查询，一旦我输入内容不同，提示框中的内容也立刻改变

所以我使用 DOM 中的 oninput 事件

oninput 事件在用户输入时触发。

该事件在 <input> 或 <textarea> 元素的值发生改变时触发。

提示： 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。

然后再焦点在 input 搜索框中时有下拉列表 ul，否则没有，所以我使用 onfocus 和 onblur 来判断焦点的进入和移除

onblur 事件会在对象失去焦点时发生。

Onblur 经常用于 Javascript 验证代码，一般用于表单输入框。

onfocus 事件在对象获得焦点时发生。

Onfocus 通常用于 <input>, <select>, 和<a>.

然后搜索框输入内容后，对数据进行匹配时使用模糊查询

function searchByIndexOf(keyWord, list){    if(!(list instanceof Array)){ return ; }    if(keyWord == ""){ return []; }else{    	var len = list.length;	    var arr = [];	    for(var i=0;i<len;i++){	        //如果字符串中不包含目标字符会返回-1	        if(list[i].indexOf(keyWord)>=0){	            arr.push(list[i]);	        }	    }	    return arr;    }}

复制代码

页面 HTML 代码：

<!DOCTYPE html><html>	<head>		<meta charset="utf-8" />		<title></title>		<link rel="stylesheet" href="css/common.css" />			</head>	<body>		<div id="container" class="center-justify">			<div class="sea-container">				<form action="">					<input type="text" name="search" class="blue-input" >										<input type="submit" value="搜索" class="blue-button">				</form>				<p id="selectedId"></p>			</div>		</div>		<script src="js/sreach.js" type="text/javascript" charset="utf-8"></script>	</body></html>