文章目錄

前言
功能

前言

大部分文章都是用了JQ或者其他的工具，而少部分利用原生JS實現功能的文章又敘述不清楚，所以針對這個問題進行整理。

功能

製作一個輸入框和下拉框：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" 
>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="test">
    <div id="perform"></div>
	<select name=" 
list" id="show">
	</select>
</body>
<script src="main.js"></script>
</html>

效果：
在這裡插入圖片描述

引入的js如果封裝起來，後期使用則會更加方便：

Set是加強版的Map，比Object更加方便
選擇Set會更加方便

class SearchList {
	constructor(url, setList = new Set()){
		this.setList = setList;
		this.url = url;
	}
	
	showHint 
(searchString){
		let xmlhttp = new XMLHttpRequest();
		xmlhttp,open("open", this.url, true);
		xmlhttp.send(searchString);
		
		xmlhttp.onreadystatechange = () => {
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				setList.add(xmlhttp.responseText);
			}
        };
	}
	
	inputList(inputId, selectId){
		document.querySelector(`#${inputId}`).addEventListener('input', event => {
			// 通過ajax傳輸資料到後臺，然後獲取傳回來的資料
			// 如果要使用ajax，放開註釋
			//this.showHint(document.getElementById(`${inputId}`).value);
			for(let index of this.setList.values()){
				let tmp = document.createElement('option');
				tmp.value = index;
				tmp.innerHTML = index;
				
				document.getElementById(`${selectId}`).appendChild(tmp);
			}
		});
	}
	
	inputTextChange(selectId, inputId){
		document.querySelector(`#${selectId}`).addEventListener('click', event => {
			let text = document.getElementById(`${inputId}`),
				select = document.getElementById(`${selectId}`),
				index = select.selectedIndex,
				val = select.options[index].text;
				
			text.value = val;
		});
	}
	
	addValue(addVal){
		this.setList.add(addVal);
		for (const val of this.setList[Symbol.iterator]()){
			console.log(val);
		}
	}
}
// 測試資料
let tmp = new Set(["a", "b", "c"]);
// url換成你的後臺地址
let list = new SearchList('url', tmp);
// test, show 分別改成你的input, select的id
list.inputList('test', 'show');
list.inputTextChange('show', 'test');

在這裡插入圖片描述

原生JS實現輸入下拉框提示

文章目錄

前言

功能

原生JS實現輸入下拉框提示

原生js實現select下拉框選擇

js實現select下拉框選擇

原生js、jquery下拉框選中內容的獲取

element 實現可輸入下拉框

JS實現多級下拉列表框

Vue.js仿Select下拉框效果

ElementUI的el-select怎樣實現下拉多選並實現給下拉框賦值和獲取值

Excel 表格資料驗證如何實現二級下拉框

LayUI可選擇可輸入下拉框

在Unity中用UGUI製作可輸入下拉框

原生js實現下拉框選擇元件

js實現帶搜尋功能的下拉框

原生js 讓<select>下拉框自動展開可用size 屬性來代替展開動作

原生js實現自定義訊息提示框

jQuery/原生實現只顯示年份下拉框

原生jQuery實現只顯示年份下拉框

C#丨下拉框控制元件Combobox輸入提示、自動補齊

js實現省市區三級聯動非select下拉框版

原生JS實現登入框郵箱提示

原生JS實現輸入下拉框提示

文章目錄

前言

功能

相關推薦