快捷導(dǎo)航

JS中的Select框?qū)崿F(xiàn)模糊搜索功能

更新時(shí)間：2024年06月06日 11:39:37 作者：茶卡鹽佑星_

本文通過(guò)實(shí)例代碼介紹JS中的Select框?qū)崿F(xiàn)模糊搜索功能,下面是使用JavaScript來(lái)實(shí)現(xiàn)模糊搜索的功能,代碼分為html部分和javascript部分,感興趣的朋友跟隨小編一起看看吧

您可以使用JavaScript來(lái)實(shí)現(xiàn)模糊搜索的功能，以下是一個(gè)簡(jiǎn)單的示例代碼：

HTML部分：

<select id="select">
  <option value="1">Apple</option>
  <option value="2">Banana</option>
  <option value="3">Cherry</option>
  <option value="4">Orange</option>
</select>

JavaScript部分：

document.getElementById('select').addEventListener('input', function() {
  var input, filter, option, i;
  input = this.value;
  filter = input.toUpperCase();
  options = this.getElementsByTagName('option');
  for (i = 0; i < options.length; i++) {
    if (options[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      options[i].style.display = '';
    } else {
      options[i].style.display = 'none';
    }
  }
});

以上代碼會(huì)監(jiān)聽(tīng)select框的input事件，當(dāng)用戶輸入內(nèi)容時(shí)，會(huì)根據(jù)用戶輸入的內(nèi)容來(lái)過(guò)濾選項(xiàng)。只有當(dāng)某個(gè)選項(xiàng)的內(nèi)容包含了用戶輸入的內(nèi)容時(shí)，該選項(xiàng)才會(huì)顯示出來(lái)，否則會(huì)被隱藏。這樣就實(shí)現(xiàn)了模糊搜索的功能。

擴(kuò)展：js實(shí)現(xiàn)模糊查詢

今天為大家分享的是使用js實(shí)現(xiàn)模糊查詢：

首先寫出html

<div class="search">
	<input type="text" class="inp">
	<div class="but">搜索</div>
</div>
<div class="list"></div>

再寫css

* {
	padding: 0;
	margin: 0;
}
.search {
	width: 96%;
	margin-left: 2%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.search input {
	width: 60%;
	height: 20px;
	border: 1px #eeeeee solid;
	padding: 5px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.search div {
	width: 20%;
	height: 32px;
	text-align: center;
	line-height: 32px;
	background-color: #eeeeee;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
.list {
	width: 96%;
	margin-left: 2%;
}
.list div {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-around;
}
.list span {
	display: block;
	width: 20%;
	line-height: 40px;
	text-align: center;
}

現(xiàn)在結(jié)構(gòu)樣式都有的就該寫數(shù)據(jù)了

let arr = [{
			name: "吳小糖",
			addres: "河南",
			base: 410725,
			num: 9999
		}, {
			name: "吳三",
			addres: "浙江",
			base: 102419,
			num: 10000
		}, {
			name: "吳磊",
			addres: "北京",
			base: 314345,
			num: 5555
		}, {
			name: "吳謹(jǐn)言",
			addres: "湖南",
			base: 341026,
			num: 7888
		}, {
			name: "吳爽",
			addres: "河南",
			base: 410756,
			num: 6666
		}, {
			name: "吳宣儀",
			addres: "海南",
		    base: 243187,
			num: 9999
		}]

下一步就該js部分了

let but = document.getElementsByClassName("but")[0];
let inp = document.getElementsByClassName("inp")[0];
	sorts(arr);
	but.onclick = function() {
let data = [];
    for (let i = 0; i < arr.length; i++) {
			for (let k in arr[i]) {
				if (String(arr[i][k]).indexOf(inp.value) > -1) {
					data.push(arr[i]);
						break;
}
}
}
	sorts(data);
}
function sorts(a) {
	let str = "";
		for (let i = 0; i < a.length; i++) {
			str += `<div>
				<span>${a[i].name}</span>
				<span>${a[i].base}</span>
				<span>${a[i].num}</span>
				<span>${a[i].addres}</span>
					</div>`
		}
document.getElementsByClassName("list")[0].innerHTML = str;
}

這樣就制作完成了，整體代碼如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!DOCTYPE html>
		<html>
			<head>
				<meta charset="utf-8">
				<meta name="viewport" content="width=device-width, initial-scale=1">
				<title></title>
				<style>
					* {
						padding: 0;
						margin: 0;
					}
					.search {
						width: 96%;
						margin-left: 2%;
						height: 60px;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.search input {
						width: 60%;
						height: 20px;
						border: 1px #eeeeee solid;
						padding: 5px;
						border-top-left-radius: 20px;
						border-bottom-left-radius: 20px;
					}
					.search div {
						width: 20%;
						height: 32px;
						text-align: center;
						line-height: 32px;
						background-color: #eeeeee;
						border-top-right-radius: 20px;
						border-bottom-right-radius: 20px;
					}
					.list {
						width: 96%;
						margin-left: 2%;
					}
					.list div {
						width: 100%;
						height: 40px;
						display: flex;
						justify-content: space-around;
					}
					.list span {
						display: block;
						width: 20%;
						line-height: 40px;
						text-align: center;
					}
				</style>
			</head>
			<body>
				<div class="search">
					<input type="text" class="inp">
					<div class="but">搜索</div>
				</div>
				<div class="list"></div>
				<script type="text/javascript">
					let arr = [{
						name: "吳小糖",
						addres: "河南",
						base: 410725,
						num: 9999
					}, {
						name: "吳三",
						addres: "浙江",
						base: 102419,
						num: 10000
					}, {
						name: "吳磊",
						addres: "北京",
						base: 314345,
						num: 5555
					}, {
						name: "吳謹(jǐn)言",
						addres: "湖南",
						base: 341026,
						num: 7888
					}, {
						name: "吳爽",
						addres: "河南",
						base: 410756,
						num: 6666
					}, {
						name: "吳宣儀",
						addres: "海南",
						base: 243187,
						num: 9999
					}]
					let but = document.getElementsByClassName("but")[0];
					let inp = document.getElementsByClassName("inp")[0];
					sorts(arr);
					but.onclick = function() {
						let data = [];
						for (let i = 0; i < arr.length; i++) {
							for (let k in arr[i]) {
								if (String(arr[i][k]).indexOf(inp.value) > -1) {
									data.push(arr[i]);
									break;
								}
							}
						}
						sorts(data);
					}
					function sorts(a) {
						let str = "";
						for (let i = 0; i < a.length; i++) {
							str += `<div>
										<span>${a[i].name}</span>
										<span>${a[i].base}</span>
										<span>${a[i].num}</span>
										<span>${a[i].addres}</span>
										</div>`
						}
						document.getElementsByClassName("list")[0].innerHTML = str;
					}
				</script>
			</body>
		</html>
	</body>
</html>

以上就是本章的全部?jī)?nèi)容，感謝您的閱讀。

到此這篇關(guān)于JS實(shí)現(xiàn)select框?qū)崿F(xiàn)模糊搜索功能的文章就介紹到這了,更多相關(guān)js模糊搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: