方法一 ： jQuery实现搜索
html 部分
<!DOCTYPEhtml><htmllang="zh_cn"><head><title>select.suggest</title><metaname="viewport"content="width=device-width, initial-scale=1.0"/><!-- Bootstrap --><scriptsrc="./jquery.js"type="text/javascript"></script></head><body><h2>Hello, world!</h2><div><div><div><inputid="testInput"name="testInput"type="text"placeholder="请选择区划"/><inputtype="hidden"name="cityRegionCode"id="cityRegionCode"/></div></div></div><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><!-- Include all compiled plugins (below), or include individual files as needed --></body><scripttype="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,}];// map遍历list
console.log("---------map方法--------");var datas = datasList.map((item)=>{
return{
...item,text: item.regionName,};});varitemSelectFuntion=function(){
console.log($("#testInput").val());
console.log($("#cityRegionCode").val());};
$.selectSuggest("testInput", datas, itemSelectFuntion);</script></html>
jquery.select.js部分
(function($){
$.selectSuggest=function(target, data, itemSelectFunction){
// console.log('target', target, data, itemSelectFunction)var defaulOption ={
suggestMaxHeight:'280px',//弹出框最大高度itemColor:'#000000',//默认字体颜色itemBackgroundColor:'RGB(255,255,255)',//默认背景颜色itemOverColor:'#ffffff',//选中字体颜色itemOverBackgroundColor:'#1b84e3',//选中背景颜色itemPadding:4,//item间距fontSize:14,//默认字体大小alwaysShowALL:true//点击input是否展示所有可选项};var maxFontNumber =0;//最大字数var currentItem;var suggestContainerId =
本文转载自: https://blog.csdn.net/qq_38377304/article/details/130629050
版权归原作者 花开不败zy 所有， 如有侵权，请联系我们删除。
版权归原作者 花开不败zy 所有， 如有侵权，请联系我们删除。