집 > 기사 > 웹 프론트엔드 > js는 검색 기능_javascript 기술을 사용하여 실시간 검색 및 드롭다운 상자의 실시간 매칭을 구현합니다.

js는 검색 기능_javascript 기술을 사용하여 실시간 검색 및 드롭다운 상자의 실시간 매칭을 구현합니다.

WBOY원래의: 2016-05-16 17:17:211846검색

1. 선택 입력 상자에 내용의 각 비트를 입력하면 해당 내용과 일치하는 옵션이 해당 옵션에서 찾아 해당 옵션의 이전 옵션에 표시됩니다.
2. 각 입력의 내용을 가져오고 키업이 수행될 때 기능을 트리거하는 방법입니다.
질문: 선택 태그에 내용을 입력할 수 있나요? (해결책: 선택 가능하고 입력 가능한 드롭다운 목록 상자가 있는 또 다른 기사)
3. 입력 상자에 콘텐츠를 가져오는 방법은 무엇입니까? (해결하려면 입력 상자에 onkeyup 시간 트리거 함수를 추가하고 js를 사용하여 가져옵니다.)
4. 일치하는 방법은 무엇입니까? (해결책)
4.1 모든 옵션의 내용을 얻는 방법은 무엇입니까? (해결책)

코드 복사 코드는 다음과 같습니다.

 
function getSelectText() 
{ 
//모든 선택 태그 가져오기
var object = document.getElementsByTagName('select'); 
//html에는 선택 태그가 하나만 있으므로 이름으로 표시되는 태그입니다. "aabb"
 var obj = object[0]; 
//alert(obj.length) 
//alert(obj[0])//값을 저장합니다. 모든 옵션 
var allText; 
for(i=0;i{ 
allText = obj[i].innerText ','; 옵션 개체의 innerText 속성을 통해 옵션 텍스트를 가져옵니다.
} 
return allText 
} 

 

4.2 js 분할 문자열? (해결책)

코드 복사 코드는 다음과 같습니다.

var allText = getSelectText() ; 
//alert(allText); 
// 각 옵션의 내용 분할
var EachOptin = new Array() 
eachOptin=allText.split(","); 분할 

 

4.3 js에서 일치하는 방법은 무엇입니까?

코드 복사 코드는 다음과 같습니다.

//입력 내용이 있는 경우 옵션 내용, 첫 번째 일치 항목의 위치(0보다 크거나 같음)를 반환하고, 일치 항목이 없으면 -1을 반환합니다. 
var flag = EachOptin[i].indexOf(shuru)

5. 매칭방법 옵션 앞에 내용이 표시되나요? (옵션의 인덱스 번호를 변경하여) (해결책)
방법: 일치하는 옵션이 발견되면 첫 번째 옵션을 다시 선택 항목 끝에 추가한 다음 첫 번째 값을 일치하는 옵션 값으로 재설정합니다. , 원래 매칭 옵션 삭제
7.js는 선택 태그 오른쪽에 삼각형 기능을 구현합니다(미해결, 검색 후 모든 옵션이 직접 선택 항목으로 표시됨)
8. option 여러 가지 옵션이 있을 때 빈대가 나타납니다. 주의해서 다시 수정해 보세요.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

test
<script> 함수 onku() { / / 입력 상자의 내용 가져오기 var shuru = document.getElementById('ccdd').value; var object = document.getElementsByTagName('select') var obj = object[0]; //입력 내용이 비어 있으면 모든 옵션이 if(shuru!= '') { //alert(shuru) //옵션 가져오기 와 일치합니다. var allText = getSelectText(); //alert(allText); //각 옵션의 내용이 나누어집니다. var EachOptin = new Array() EachOptin=allText.split(" ,"); //문자 분할 var f = 1; for (i=1;i<eachoptin.length-1>{ / /alert(eachOptin[i] ); //옵션 내용에 입력 내용이 있는 경우 일치하는 첫 번째 위치(0보다 크거나 같음)를 반환하고, 일치하는 내용이 없으면 -1을 반환합니다. var flag = EachOptin[i] .indexOf(shuru) ; if(flag >=0) { //alert(i) //다시 인덱스 f를 사용하여 옵션을 추가하고 obj.options.add(new Option(obj[i].innerText,obj[f].value)); //조건을 충족하도록 번호가 붙은 옵션 f를 다시 할당합니다. 첫 번째 옵션 obj.options[ f]=new Option(eachOptin[i],eachOptin[i]); //처음에 존재하는 적합한 옵션 삭제 obj.remove(i ) f } } } } function getSelectText() { //모든 선택 태그 가져오기 var object = document .getElementsByTagName('select') //Because HTML에는 선택 태그가 하나만 있으며, 이는 name = "aabb" var obj = object[0] //alert( obj.length)//alert로 표시됩니다. (obj[0]); //모든 옵션의 값을 저장합니다 var allText for(i=0;i<obj.length;i ) { //alert(obj[i].index);//옵션의 인덱스 번호를 가져옵니다 //alert(obj[i].value);//옵션 값의 값을 가져옵니다 allText = obj[ i].innerText ','; //옵션 객체의 innerText 속성을 통해 옵션 텍스트를 얻는 것이 핵심입니다 } return allText } </script> >

< ;/span>

코드의 주석에 주의하세요
위 코드의 결과는 다음과 같습니다.

성명：

이전 기사：여러 반환 값을 반환하는 js 함수의 샘플 코드_javascript 기술다음 기사：여러 반환 값을 반환하는 js 함수의 샘플 코드_javascript 기술

js는 검색 기능_javascript 기술을 사용하여 실시간 검색 및 드롭다운 상자의 실시간 매칭을 구현합니다.

관련 기사