Exemple de fonctions de recherche et de mise en évidence implémentées en JavaScript

Cet article présente principalement les fonctions de recherche et de mise en évidence implémentées par JavaScript, impliquant les compétences opérationnelles liées à la traversée des caractères javascript et aux attributs des éléments de page. Les amis intéressés par JavaScript peuvent se référer à cet article

.

Scénario : est utilisé pour filtrer les données dans la liste. Étant donné que les données uniques sont très courtes, php+mysql n'est pas utilisé pour implémenter la fonction de filtrage. Seul javascript est utilisé pour filtrer, mettez en surbrillance le. correspondant, ou ceux qui ne correspondent pas sont masqués

Rendu :

html :

<p class="contracts-header">名称: <input type="text" value="" id="search_contract_name"></p>
<p class="contracts-header">代码: <input type="text" value="" id="search_contract_code" placeholder="不区分大小写"></p>
<p class="contracts-header"><button onclick="search()">查找</button></p>
<p 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>
</p>

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';
        }
      }
    );
  }
}

Ce qui précède représente tout le contenu de cet article. J'espère qu'il sera utile à tous ceux qui apprennent JavaScript ! !

Recommandations associées :

Analyse d'un exemple de modèle de constructeur JavaScript

Comment JavaScript calcule la longueur d'un objet

Explication détaillée du typeof et du jugement de type en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!