方法一 ： jQuery实现搜索
html 部分
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<title>select.suggest</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./jquery.js" type="text/javascript"></script>
</head>
<body>
<h2>Hello, world!</h2>
<div>
<div>
<div>
<input
id="testInput"
name="testInput"
type="text"
placeholder="请选择区划"
/>
<input type="hidden" name="cityRegionCode" id="cityRegionCode" />
</div>
</div>
</div>
</body>
<script type="text/javascript">
$("#testInput").val("省本级");
$("#cityRegionCode").val("370001");
var datasList = [
{
id: "1656",
regionCode: "371723",
regionName: "成武县",
parentId: "1651",
leaf: "1",
status: null,
parentRegionCode: null,
parentRegionName: null,
},
{
id: "1614",
regionCode: "371325",
regionName: "费县",
parentId: "1605",
leaf: "1",
status: null,
parentRegionCode: null,
parentRegionName: null,
},
{
id: "1529",
regionCode: "370405",
regionName: "台儿庄区",
parentId: "1524",
leaf: "1",
status: null,
parentRegionCode: null,
parentRegionName: null,
}
];
console.log("---------map方法--------");
var datas = datasList.map((item) => {
return {
...item,
text: item.regionName,
};
});
var itemSelectFuntion = function () {
console.log($("#testInput").val());
console.log($("#cityRegionCode").val());
};
$.selectSuggest("testInput", datas, itemSelectFuntion);
</script>
</html>
jquery.select.js部分
(function ($) {
$.selectSuggest = function (target, data, itemSelectFunction) {
var defaulOption = {
suggestMaxHeight: '280px',
itemColor: '#000000',
itemBackgroundColor: 'RGB(255,255,255)',
itemOverColor: '#ffffff',
itemOverBackgroundColor: '#1b84e3',
itemPadding: 4,
fontSize: 14,
alwaysShowALL: true
};
var maxFontNumber = 0;
var currentItem;
var suggestContainerId =
