前端jQuery和原生js 实现下拉框select模糊搜索功能总结

方法一： jQuery实现搜索

html 部分

 <!DOCTYPE html>
<html lang="zh_cn">
  <head>
    <title>select.suggest</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- Bootstrap -->
    <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>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
  </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,
      }
    ];
    // map遍历list
    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) {
   
    // 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 =复制

标签

前端jQuery和原生js 实现下拉框select模糊搜索功能总结

方法一： jQuery实现搜索

html 部分

jquery.select.js部分

判断鼠标移入移出页面某个元素（监听鼠标事件）

Java项目:影评书评管理系统(java SpringBoot JQuery HTML JSP mysql)

jquery监听input值改变

jquery 笔记

jQuery Ajax前后端数据交互

HTML 中的 jQuery 事件处理与 Ajax 异步请求

JQuery入门基础

JQuery中的事件对象

解决 Vue 中使用 Echarts 出现 There is a chart instance already initialized on the dom 的警告问题

Echarts数据可视化第4章 Echarts可视化图 4.8 仪表盘

前端哥

判断鼠标移入移出页面某个元素（监听鼠标事件）

Java项目:影评书评管理系统(java SpringBoot JQuery HTML JSP mysql)

jquery监听input值改变

jquery 笔记

jQuery Ajax前后端数据交互

HTML 中的 jQuery 事件处理与 Ajax 异步请求

JQuery入门基础

JQuery中的事件对象

解决 Vue 中使用 Echarts 出现 There is a chart instance already initialized on the dom 的警告问题

Echarts数据可视化第4章 Echarts可视化图 4.8 仪表盘

1
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

2
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

3
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

4
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

5
移动端css布局大全

2024-02-06 15:02:421000

6
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

7
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

8
vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

9
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

10
jQuery事件处理

2024-03-12 01:03:32999

	<!DOCTYPE html>
	<html lang="zh_cn">
	<head>
	<title>select.suggest</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<!-- Bootstrap -->
	<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>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	</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,
	}
	];
	// map遍历list
	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>

	(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 =

前端jQuery和原生js 实现下拉框select模糊搜索功能总结

方法一 ： jQuery实现搜索

html 部分

jquery.select.js部分

微信扫一扫：分享

方法一： jQuery实现搜索