本發明專利技術公開了一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法，包括：步驟1：創建InputSelect.vue文件；步驟2：引入input和div標簽，并增加script標簽進行數據處理，增加style標簽進行樣式控制；步驟3：定義isShowSelect控制是否顯示下拉區域，定義selectedValue進行下拉數據初始化及其遍歷；步驟4：通過input的@focus和@input事件來觸發下拉區域是否顯示；步驟5：使用filter和indexOf函數實現根據用戶輸入的字符進行下拉篩選。本發明專利技術實現了用戶不僅可以通過鍵盤輸入新的值，也可以通過下拉對之前填寫過的內容進行選擇，避免重復填寫相同的內容，并且在用戶輸入每一個字符時，會對之前輸入的值進行模糊搜索，并進行模糊匹配，過濾掉無關條目，篩選出用戶可能會輸入的條目。從而提高用戶使用效率，體驗更佳。體驗更佳。體驗更佳。
【技術實現步驟摘要】
一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法
[0001]本專利技術涉及web前端應用
，尤其涉及一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法。
技術介紹
[0002]隨著互聯網技術的發展，各種web應用層出不窮，這些web應用在滿足基本功能的同時，對交互方式也有了更高的追求。
[0003]特別是當數據量非常大的時候，有些基礎的HTML標簽就不能滿足一些特定的場景，就需要基于HTML標簽進行封裝，從而在一些特定的場景中使用，例如當下拉選擇框中數據量有成千上萬條的時候，不能讓用戶一直向下滾動然后去查找目標數據，就需要在下拉框中插入分頁組件來更好的展示數據，這樣用戶就可以通過翻頁來找到目標數據。通過這樣的封裝，無論從功能還是交互以及UI上，都能讓用戶有更好的體驗。
[0004]在一些常見的開源UI框架中，例如Element、Ant
?
Design等，這些UI框架都會有一些進行二次封裝的UI組件，例如級聯選擇器、穿梭框、骨架屏、抽屜、步驟條等等組件，不僅滿足了web前端開發中基本的功能需求，而且在交互上也給用戶提供了更快捷、更高效的使用方式，從視覺上也更加簡潔明了。
[0005]但在web前端開發過程中，一些開源的UI框架中的組件雖然能滿足大部分的使用場景，但在某些特殊需求的地方，這些組件顯得捉襟見肘，不能滿足客戶的需求。例如UI設計人員在設計模態框時，一些按鈕的樣式，并非是按照開源的UI框架中的模態框的樣式來進行設計的，要么按鈕位置不同，要么按鈕顏色不同，或者是多了一些標簽。如果要實現客戶的需求，就不能直接使用這些組件進行開發，這時候就需要基于原生的HTML標簽然后進行定制化組件開發來滿足客戶的需求。
技術實現思路
[0006]本專利技術提供了一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法，以解決現有技術中原生的input標簽能實現用戶的輸入，原生的select組件能實現用戶的下拉選擇，但沒有一個原生的HTML標簽既能實現輸入的同時還能夠進行下拉選擇并且還能進行模糊搜索的功能。一些開源的UI框架中的組件也沒有實現該功能的組件。因此要實現上述特殊需求的功能，要么基于原生的HTML標簽進行實現，要么修改開源的UI框架的源碼。而修改開源UI框架的源碼有一定的難度，因此本專利技術主要是實現上述的第1種方案，也就是基于原生的HTML標簽來進行實現，從而滿足客戶的需求。
[0007]本專利技術采用的技術方案是：提供一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法，包括：
[0008]步驟1：創建InputSelect.vue文件；
[0009]步驟2：引入input和div標簽，并增加script標簽進行數據處理，增加style標簽進行樣式控制；
[0010]步驟3：定義isShowSelect控制是否顯示下拉區域，定義selectedValue進行下拉數據初始化及其遍歷；
[0011]步驟4：通過input的@focus和@input事件來觸發下拉區域是否顯示；
[0012]步驟5：使用filter和indexOf函數實現根據用戶輸入的字符進行下拉篩選。
[0013]進一步的，所述步驟1包括：
[0014]步驟1.1：在所在的工程的components文件夾中創建一個common文件夾；
[0015]步驟1.2：在common文件夾中創建一個InputSelect.vue文件。
[0016]進一步的，所述步驟2包括：
[0017]步驟2.1：在步驟1創建的InputSelect.vue文件中，創建一個template標簽；
[0018]步驟2.2：在步驟2.1的template標簽中，創建一個div標簽；
[0019]步驟2.3：在步驟2.2的div標簽中，創建一個input標簽；
[0020]步驟2.4：在步驟2.3的input標簽中，寫入@focus屬性，并寫上showSelect事件；
[0021]步驟2.5：在步驟2.4的input標簽中，寫入@input屬性，并寫上inputChange事件；
[0022]步驟2.6：增加腳本標簽，插入js代碼。
[0023]進一步的，所述步驟3包括：
[0024]步驟3.1：在步驟2.6的標簽中，定義一個isShowSelect變量，并初始化其值為false,該變量主要用于控制input下方的選擇區域是否顯示，默認不顯示；
[0025]步驟3.2：在showSelect事件中，將步驟3.1的isShowSelect變量，通過isShowSelect.value＝true，將其值改為true,從而讓選擇區域進行顯示；
[0026]步驟3.3：在步驟2.3創建的div中，添加v
?
if＝"isShowSelect"，來控制div是否顯示，并在該div中再添加一個div，用戶顯示具體的條目；
[0027]步驟3.4：在步驟2.6的標簽中，定義一個selectData變量，并初始化其值為[],該變量主要用于接收傳進來的選擇區域的數據來源；
[0028]步驟3.5：在步驟3.3創建的div中，添加v
?
for＝"iteminselectData"，對步驟3.4的傳進來的數據進行遍歷，并將每條遍歷的數據，放入步驟3.3的div中，從而對下拉數據進行展示；
[0029]步驟3.6：在步驟2.6的標簽中，定義一個selectedValue變量，并初始化其值為空。
[0030]進一步的，所述步驟4包括：
[0031]步驟4.1：給步驟3.3的div中，添加一個@click事件，當用戶點擊時，傳入被點擊的條目，將被點擊的條目的值，傳入步驟3.6定義的selectedValue變量中，并將其雙向綁定給input，從而實現被點擊后，動態改變input的值的效果；
[0032]步驟4.2：當用戶在input中輸入值時，觸發@input事件，在步驟2.3的inputChange事件中，傳入用戶輸入的值；
[0033]步驟4.3：初始化一個數組，名為userInfoArray，其初始值為空；
[0034]步驟4.4：用戶點擊確定后，將之前輸入的值，通過push函數將值放入步驟4.3定義的userInfoArray中，并使用JSON.stringify將其轉換為一個JSON字符串，并存入到localStorage中；
[0035]步驟4.5：當用戶下次點擊步驟2.3中的input時，通過localStorage.getItem()來獲取之前存入過的值，并通過JSON.parse()來將其值轉換為一個JSON對象；
[0036]步驟4.6：在步驟2.6的標簽中，定義一個newSelectData變量，并初始化其值為空；
[0037]步驟4.7：當用戶下次點擊步驟2.3中的input時本文檔來自技高網...
【技術保護點】
【技術特征摘要】
1.一種基于Input標簽實現輸入和下拉并進行模糊搜索的方法，其特征在于，包括：步驟1：創建InputSelect.vue文件；步驟2：引入input和div標簽，并增加script標簽進行數據處理，增加style標簽進行樣式控制；步驟3：定義isShowSelect控制是否顯示下拉區域，定義selectedValue進行下拉數據初始化及其遍歷；步驟4：通過input的@focus和@input事件來觸發下拉區域是否顯示；步驟5：使用filter和indexOf函數實現根據用戶輸入的字符進行下拉篩選。2.根據權利要求1所述的基于Input標簽實現輸入和下拉并進行模糊搜索的方法，其特征在于，所述步驟1包括：步驟1.1：在所在的工程的components文件夾中創建一個common文件夾；步驟1.2：在common文件夾中創建一個InputSelect.vue文件。3.根據權利要求2所述的基于Input標簽實現輸入和下拉并進行模糊搜索的方法，其特征在于，所述步驟2包括：步驟2.1：在步驟1創建的InputSelect.vue文件中，創建一個template標簽；步驟2.2：在步驟2.1的template標簽中，創建一個div標簽；步驟2.3：在步驟2.2的div標簽中，創建一個input標簽；步驟2.4：在步驟2.3的input標簽中，寫入@focus屬性，并寫上showSelect事件；步驟2.5：在步驟2.4的input標簽中，寫入@input屬性，并寫上inputChange事件；步驟2.6：增加腳本標簽，插入js代碼。4.根據權利要求3所述的基于Input標簽實現輸入和下拉并進行模糊搜索的方法，其特征在于，所述步驟3包括：步驟3.1：在步驟2.6的標簽中，定義一個isShowSelect變量，并初始化其值為false,該變量用于控制input下方的選擇區域是否顯示，默認不顯示；步驟3.2：在showSelect事件中，將步驟3.1的isShowSelect變量，通過isShowSelect.value＝true，將其值改為true,從而讓選擇區域進行顯示；步驟3.3：在步驟2.3創建的div中，添加v
?
if＝"isShowSelect"，來控制div是否顯示，并在該div中再添加一個div，用戶顯示具體的條目；步驟3.4：在步驟2.6的標簽中，定義一個selectData變量，并初始化其值為[],該變量用于接收傳進來的選擇區域的數據來源；步驟3.5：在步驟3.3創建的div中，添加v
?
for＝"iteminselectData"，對步驟3.4的傳進來的數據進行遍歷，并將每條遍歷的數據，放入步驟3.3的div中，從而對下拉數據進行展示；步驟...
【專利技術屬性】
技術研發人員：劉強，
申請(專利權)人：四川啟睿克科技有限公司，
類型：發明
國別省市：
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。