搜尋
首頁web前端js教程input輸入框的自動比對(原生程式碼)_javascript技巧

今天看群組裡有人發起了人人網以前一些面試題,我以前也轉載過一些,恰好閒著,挑選一題來做做,練個手。

本題有以下要求
1. 使用原生程式碼實現,不可使用任何框架;
2. 對input框中輸入的字元進行匹配,將匹配到的內容以選單的形式展現在input框的下方;
3. 只針對英文字元進行匹配,並且匹配到的內容在選單中加粗;
4. 透過鍵盤上的上下箭頭可以對選單進行選擇,按下回車後將選取的內容寫入到input框中;
思路
捕捉輸入變化,用使用者輸入的值(下稱輸入值)去匹配列表項,這裡假設列表項是查詢傳回的一個數組(下稱列表),匹配方式為用輸入值作為開始值來匹配每個列表值,將符合篩選條件的項輸出到頁面。
分 析
第三點要求中關鍵字是加粗,這裡用正規替換就好了。
第四點要求的關鍵字就比較多了,一句話暗藏許多殺機,這一部分主要是針對鍵盤,首先是上下按鍵,然後是回車,還有一個寫入到input框。

到這,如果你認為完了那就操之過急了,至少還有4個隱性的需求。
•第一項預設高亮顯示,上下按鍵的同時當前項高亮。
•按Enter預設第一項被選取。
•老鼠經過時當前項高亮。
•支援點選選取項目。
也許還有遺漏,這裡就不糾結了。
實 踐
這雖然是一道JS題,但這之前,頁面結構還是要先寫好。

複製程式碼 程式碼如下:










由於不允許用框架,這裡對一些可能要到的方法作一個簡單的封裝。 先建立一個封裝對象,暫且取名 dom,接下來的原生方法都放進這個物件以作複用。 複製程式碼

程式碼如下:


var dom = { <. f5>$ : function( ){
return document.getElementById(id);
},
tag : function( tagName,root ){
root = root ? root : document;
return this.rootmakeArray(t. 。
}else if( document.attachEvent ){
element.attachEvent( 'on' type,handler );
};
},
removeClass : function( list,name ){
var el = list[i],
r = new RegExp('\s*\b' name '\b\s*','g');
for( var i = 0 , len = list.length ; i var cur = list[i];
if( r.test( cur.className ) ){
cur.className = cur.className.replace (r,'');
};
};
},
height : function( element ){
return element.offsetHeight;
},
getBound : function( element ){
return element.getBoundingClientRect();
},
getText : function( element ){
return element.textContent ? element.textContent Text:ementel. ,
trim : function( string ){
return string.replace( /^s*(.*)s*$/,'$1' );
},
makeArray : function( tag ){
for( var i = 0 , arr = [] , len = tagList.length ; i arr.push( tagList[i] );
};
};
return arr;
},
isVisible : function( element ){
return element.style.display == 'block';
}
};



接著再創建一個對象,用來存放具體的處理邏輯,作者英文比較狗血,就叫autoMatch吧。
這個物件要做的事情可多了:
•確定好選單的位置;
•即時處理使用者輸入;
•處理滑鼠和鍵盤按鍵動作;
決定選單的位置用封裝對象dom的getBound方法,傳回一個邊界對象,此物件有兩個屬性left和top。眼熟吧,它類似jQuery裡的offset()方法。
處理使用者輸入這裡值得一提,由於是即時處理,開始考慮用onchange事件,但是它只會在失去焦點時才觸發,所以是不合理的。
這時我的目光轉向了oninput,它完全能夠勝任工作。
複製程式碼 程式碼如下:

dom.bind( obj.input,'obj.input,' this.inputProcess );

可是,IE又做了一回不走尋常路的事兒。它並不支援oninput。
空歡喜一場,白瞎了!
凡事總是有轉機的。角落裡的onpropertychange向我們緩緩走來…,它和oninput非常相似,有著一樣的特性,至少在捕捉input輸入方面,正是我想要的,對付IE,我們都用它,用了都說好。
再綁定一次:
複製程式碼 程式碼如下:
. obj.input,'propertychange' , this.inputProcess );

接下來是按鍵,上,下,回車。對應的鍵編碼分別是38、40、13,唯一要注意的是FF和IE的屬性名稱不一樣。
詳細的實作細節請見Demo:

猛擊我查看Demo 真實業務場景中,可能要對用戶的輸入作實時Ajax查詢,這代表著每敲一個字母都會有查詢一次。
然而如此頻繁發送Ajax請求實在太不划算,回應速度上也不容許這樣的實現。
我的想法是當使用者敲第一個字母時,發送一次請求(請求資料一般有數量限制,一般是10條),並將回傳值儲存起來(下稱快取)。
在第一個字母之後的使用者輸入,都在快取裡面篩選,到這裡就如同本地查詢一樣了,每輸入一個字母,精確度越來越高,快取越來越小。
當使用者清空,重新輸入時重複以上的步驟。
當然,不排除會有一些更複雜的業務場景,例如,在匹配充足的情況下,要保證用戶每次輸入都有10條資料可選,這就需要更多的判斷以及請求。
所以,具體實作取決於真實的業務場景。
至此,本文結束。感謝閱讀,歡迎有血有肉的置評。
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
vue3怎么封装input组件和统一表单数据vue3怎么封装input组件和统一表单数据May 12, 2023 pm 03:58 PM

准备工作用vuecreateexample创建项目,参数大概如下:用原生input原生的input,主要是value和change,数据在change的时候需要同步。App.tsx如下:import{ref}from&#39;vue&#39;;exportdefault{setup(){//username就是数据constusername=ref(&#39;张三&#39;);//输入框变化的时候,同步数据constonInput=;return()=>({

laravel input隐藏域怎么实现laravel input隐藏域怎么实现Dec 12, 2022 am 10:07 AM

laravel input隐藏域的实现方法:1、找到并打开Blade模板文件;2、在Blade模板中使用method_field方法来创建隐藏域,其创建语法是“{{ method_field('DELETE') }}”。

点击input框没有光标怎么办点击input框没有光标怎么办Nov 24, 2023 am 09:44 AM

点击input框没有光标的解决办法:1、确认输入框焦点;2、清除浏览器缓存;3、更新浏览器;4、使用JavaScript;​5、检查硬件设备;6、检查输入框属性;7、调试JavaScript代码;8、检查页面其他元素;9、考虑浏览器兼容性。

Vue文档中的input框绑定事件详解Vue文档中的input框绑定事件详解Jun 21, 2023 am 08:12 AM

Vue.js是一种轻量级的JavaScript框架,具有易用、高效和灵活的特点,是目前广受欢迎的前端框架之一。在Vue.js中,input框绑定事件是一个十分常见的需求,本文将详细介绍Vue文档中的input框绑定事件。一、基础概念在Vue.js中,input框绑定事件指的是将输入框的值绑定到Vue实例的数据对象中,从而实现输入和响应的双向绑定。在Vue.j

使用jQuery实现输入框仅允许输入数字和小数点使用jQuery实现输入框仅允许输入数字和小数点Feb 26, 2024 am 11:21 AM

实现jQuery输入框限制数字和小数点输入在Web开发中,我们经常会遇到需求需要控制用户在输入框中输入的内容,比如限制只能输入数字和小数点。这种限制可以通过JavaScript和jQuery来实现。下面将介绍如何使用jQuery实现输入框限制数字和小数点输入的功能。一、HTML结构首先,我们需要在HTML中创建一个输入框,代码如下:

Vue文档中的input框回车事件和验证函数使用方法Vue文档中的input框回车事件和验证函数使用方法Jun 20, 2023 am 09:13 AM

Vue是一个流行的JavaScript前端框架,它的核心是响应式数据绑定和组件系统。在Vue的应用程序中,input框是最常用的UI元素之一。在用户输入文本时,我们希望可以监听回车事件,并且在提交前对输入内容进行验证。本篇文章将介绍Vue文档中的input框回车事件和验证函数使用方法。一、Vue中input框回车事件在Vue中监听input框的回车事件非常简

Vue开发中输入框长度限制的优化方法是什么?Vue开发中输入框长度限制的优化方法是什么?Jun 30, 2023 am 08:44 AM

如何优化Vue开发中的输入框输入长度限制问题引言:在Vue开发过程中,输入框长度限制是一个常见的需求。限制用户在输入框中输入的字符个数有助于保持数据的准确性、优化用户体验以及提高系统的性能。本文将介绍如何优化Vue开发中的输入框输入长度限制问题,以提供更好的用户体验和开发效率。一、使用v-model指令绑定输入框值在Vue开发中,我们通常使用v-model指

手把手教你用CSS实现简单大气的输入框手把手教你用CSS实现简单大气的输入框Jan 13, 2023 pm 03:55 PM

本篇文章给大家带来了关于CSS的相关知识,其中主要介绍了怎么用CSS实现一个简单又高大上的输入框,手把手教你哦~下面一起来看一下吧,希望对需要的朋友有所帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器