JavaScript 가 구현 한 검색 및 하 이 라이트 디 스 플레이 기능 예제
3560 단어 JavaScript수색 하 다.하 이 라이트
상황:목록 의 데 이 터 를 선별 하 는 데 사 용 됩 니 다.단일 데이터 가 짧 기 때문에 phop+my sql 로 선별 기능 을 수행 하지 않 고 자바 script 으로 만 선별 합 니 다.일치 하 는 하 이 라이트 나 일치 하지 않 는 것 을 숨 깁 니 다.
효과 그림:
html:
<div class="contracts-header"> : <input type="text" value="" id="search_contract_name"></div>
<div class="contracts-header"> : <input type="text" value="" id="search_contract_code" placeholder=" "></div>
<div class="contracts-header"><button onclick="search()"> </button></div>
<div id="contracts-list">
<ul>
<li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
<li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li>
</ul>
</div>
javascript:
function search()
{
var search_contract_name = $("#search_contract_name").val();
var search_contract_code = $("#search_contract_code").val();
if (search_contract_name && search_contract_code) { //
search_contract_code = search_contract_code.toLowerCase(); // , ,
$("input[name='contract[]']").each(
function () {
var code_name = this.value;
var search_code = code_name.toLowerCase().indexOf(search_contract_code);
var search_name = code_name.toLowerCase().indexOf(search_contract_name);
if (search_code >=0 && search_name >=0 ) {
// this.nextSibling.style.backgroundColor = "#FFDEAD"; //
this.parentNode.style.display = 'block';
} else {
// this.nextSibling.style.backgroundColor = "";
this.parentNode.style.display = 'none'; //
}
}
);
} else if(search_contract_name || search_contract_code) { //
search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; // xxx xxx
search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx';
$("input[name='contract[]']").each(
function () {
var code_name = this.value;
var search_code = code_name.toLowerCase().indexOf(search_contract_code);
var search_name = code_name.toLowerCase().indexOf(search_contract_name);
if (search_code >=0 || search_name >=0 ) {
// this.nextSibling.style.backgroundColor = "#FFDEAD";
this.parentNode.style.display = 'block';
} else {
// this.nextSibling.style.backgroundColor = "";
this.parentNode.style.display = 'none';
}
}
);
}
}
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.