上一篇 input動態搜索下拉框組件input-dynamic-select使用(一) 大致介紹了input-dynamic-select組件的使用方法，現在通過一個demo具體介紹這個組件的使用方法。我使用node的express的框架簡單搭建了一個後臺服務接口，前端通過調用這個接口獲取數據。
demo代碼見：https://github.com/yog-zhang/input-dynamic-select.git
1.整體結構
首先，這個demo的整體結構如下：
構建打包工具使用的是webpack，打包入口文件是index.js，服務接口api寫在server.js文件中
最後呈現的效果如下：
2.搭建後臺服務
在終端輸入 node server.js命令啓動後臺服務，後臺服務接口地址爲：http://localhost:8088/mock，這個接口接受一個參數keywords，這個參數就是在input輸入框輸入的查詢關鍵字，接口根據查詢關鍵字返回數據。這裏爲了簡單清晰說明問題，用一個數組模擬從數據庫查詢數據，不是真從數據庫查詢數據，代碼如下：
app.get('/mock', function(req, res){
let keywords = req.query['keywords']
console.log('keywords:',keywords)
let result = []
let dataList = Array.of(
"男子單打羽毛球",
"女子單打羽毛球",
"男子雙打羽毛球",
"女子雙打羽毛球",
"男女混雙羽毛球",
"男子單打乒乓球",
"女子單打乒乓球",
"男子雙打乒乓球",
"女子雙打乒乓球",
"男女混雙乒乓球",
"男子單打網球",
"女子單打網球",
"男子雙打網球",
"女子雙打網球",
"男女混雙網球"
)
if(keywords && keywords.trim()){
result = dataList.filter((val) => {
return val.indexOf(keywords) > -1
})
}
res.append('content-type','application/json;charset=utf-8')
res.end(JSON.stringify(result))
})
3.前端調用
input.html 代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input-dynamic-select</title>
</head>
<body>
<div class='inputPanel' style="width: 200px;">
<span>比賽項目：</span>
<input type="text" id="inputId"/>
</div>
</body>
</html>
在HTML中要寫一個input元素，賦給它一個id選擇器，這個id會和後面的動態下拉框進行綁定。
import $ from 'jquery'
import DSelect from 'input-dynamic-select'
//新建DSelect實例，通過'inputId'綁定input輸入框
let dSelect = new DSelect('inputId',
[
// ul元素上的類iuds-selectPanel-n的樣式（n是當時創建的DSelect實例序列）
{
'display': 'none',
'list-style-type': 'none',
'margin': '0',
'padding': '0',
'border': '1px solid #d9d9d9',
'background-color': '#ceffff',
'width': '160px',
'height': '200px',
'overflow-y': 'auto'
},
// li元素上的樣式
{
'padding-left': '5px',
'line-height': '30px'
},
// 懸浮在li元素上的樣式
{
'background-color': '#d9d9d9',
'cursor': 'pointer'
},
// li元素下面span元素上的樣式
{
'color': 'red',
'font-weight': 'bolder'
}
]
)
// ajax請求方法
function ajaxFn(keywords){
$.ajax({
type: 'GET',
url: `/mock?keywords=${keywords}`,
async: true,
contentType: 'application/json;charset=utf-8',
success: function(data){
if(data && data.length > 0){
dSelect.setDataList(data)
}
},
error:function(e){
console.log(e)
}
})
}
let inputNode = document.querySelector('#inputId')
// 監聽input輸入框的input事件，動態從後臺獲取數據
inputNode.addEventListener('input', (e) => {
let keywords = e.currentTarget.value
ajaxFn(keywords)
})
顯示效果：
根據輸入的關鍵字進行實時從後臺取數據，然後渲染下拉列表。
當然想要它渲染中什麼樣式，比如字體顏色、背景色、行高等等都可以自己去設置，自由權完全在你。
new DSelect(id, styleArray),第二個數組參數一個可以設置四個子元素，每個元素都可以爲null，爲null則會展示默認樣式，但是如果裏面如果有一個子元素不爲空，那其他爲null的子元素不能省略不寫，要寫上null，像這樣：
let dSelect = new DSelect('inputId',
[
// ul元素上的類iuds-selectPanel-n的樣式（n是當時創建的DSelect實例序列）
{
'display': 'none',
'list-style-type': 'none',
'margin': '0',
'padding': '0',
'border': '1px solid #d9d9d9',
'background-color': '#ceffff',
'width': '160px',
'height': '200px',
'overflow-y': 'auto'
},
// li元素上的樣式
// 不能省略不寫
null,
// 懸浮在li元素上的樣式
// 不能省略不寫
null,
// li元素下面span元素上的樣式
{
'color': 'red',
'font-weight': 'bolder'
}
]
)
但是如果數組子元素全爲空，則可以直接這樣寫：
let dSelect = new DSelect('inputId',null)
或者直接不寫第二個參數：
let dSelect = new DSelect('inputId')
4.敲擊下拉框元素外部，將下拉框隱藏
你可能發現，當下拉框渲染出來的時候，還沒有進行選擇，你點擊下拉框的外部區域，下拉框一直在，沒有消失，這可能不太符合需求。當然這個功能我本來打算包含在組件中，但發現由於每個人的頁面結構以及個人的需求不一樣，不好寫成統一的格式，所以還是交給自己去實現這個功能，當然也挺簡單的，直接寫一個click監聽事件，當監測到不是下拉框元素時（一般是input元素和下拉框元素的父元素），就將下拉框元素隱藏掉：
import $ from 'jquery'
import DSelect from 'input-dynamic-select'
//新建DSelect實例，通過'inputId'綁定input輸入框
let dSelect = new DSelect('inputId',
[
// ul元素上的類iuds-selectPanel-n的樣式（n是當時創建的DSelect實例序列）
{
'display': 'none',
'list-style-type': 'none',
'margin': '0',
'padding': '0',
'border': '1px solid #d9d9d9',
'background-color': '#ceffff',
'width': '160px',
'height': '200px',
'overflow-y': 'auto'
},
// li元素上的樣式
{
'padding-left': '5px',
'line-height': '30px'
},
// 懸浮在li元素上的樣式
{
'background-color': '#d9d9d9',
'cursor': 'pointer'
},
// li元素下面span元素上的樣式
{
'color': 'red',
'font-weight': 'bolder'
}
]
)
// ajax請求方法
function ajaxFn(keywords){
$.ajax({
type: 'GET',
url: `/mock?keywords=${keywords}`,
async: true,
contentType: 'application/json;charset=utf-8',
success: function(data){
if(data && data.length > 0){
dSelect.setDataList(data)
}
},
error:function(e){
console.log(e)
}
})
}
let inputNode = document.querySelector('#inputId')
// 監聽input輸入框的input事件，動態從後臺獲取數據
inputNode.addEventListener('input', (e) => {
let keywords = e.currentTarget.value
ajaxFn(keywords)
})
//當敲擊動態下拉框元素之外的元素時，隱藏下拉框
document.body.addEventListener('click',function(e){
let inputPanel = document.querySelector('.inputPanel')
if(!inputPanel.contains(e.target)){
dSelect.getOptions().selectNode.style.display = 'none'
}
})
input-dynamic-select插件的使用方法大致就介紹完了。
水平有限，歡迎批評指正！