第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

基于首字母的過濾搜索

基于首字母的過濾搜索

皈依舞 2023-11-02 20:13:33
問題是我想以首字母在前的格式過濾列表中的單詞。正如您現(xiàn)在所看到的，我在搜索字段中輸入字母“ a ”，結(jié)果是所有與“ a ”相關(guān)的單詞。但我只想要“ a ”的第一個字母單詞。然后我輸入“ an ”，結(jié)果應(yīng)該是“ an ”起始詞。function myFunction() {    var input, filter, ul, li, a, i, txtValue;    input = document.getElementById("myInput");    filter = input.value.toUpperCase();    ul = document.getElementById("myUL");    li = ul.getElementsByTagName("li");    for (i = 0; i < li.length; i++) {        a = li[i].getElementsByTagName("a")[0];        txtValue = a.textContent || a.innerText;        if (txtValue.toUpperCase().indexOf(filter) > -1) {            li[i].style.display = "";        } else {            li[i].style.display = "none";        }    }}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><h2>My Phonebook</h2><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><ul id="myUL">  <li><a href="#">Adele</a></li>  <li><a href="#">Agnes</a></li>  <li><a href="#">Agitha</a></li>  <li><a href="#">Billy</a></li>  <li><a href="#">Bob</a></li>  <li><a href="#">Calvin</a></li>  <li><a href="#">Christina</a></li>  <li><a href="#">Cindy</a></li></ul></body></html>https://i.stack.imgur.com/yAXJP.png
查看完整描述

6 回答

?
子衿沉夜

TA貢獻1828條經(jīng)驗 獲得超3個贊

這if (txtValue.toUpperCase().indexOf(filter) > -1)應(yīng)該改為


if (txtValue.toUpperCase().indexOf(filter) === 0)

function myFunction() {

    var input, filter, ul, li, a, i, txtValue;

    input = document.getElementById("myInput");

    filter = input.value.toUpperCase();

    ul = document.getElementById("myUL");

    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {

        a = li[i].getElementsByTagName("a")[0];

        txtValue = a.textContent || a.innerText;

        if (txtValue.toUpperCase().indexOf(filter) === 0) {

            li[i].style.display = "";

        } else {

            li[i].style.display = "none";

        }

    }

}

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">


</head>

<body>


<h2>My Phonebook</h2>


<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">


<ul id="myUL">

  <li><a href="#">Adele</a></li>

  <li><a href="#">Agnes</a></li>

  <li><a href="#">Agitha</a></li>


  <li><a href="#">Billy</a></li>

  <li><a href="#">Bob</a></li>


  <li><a href="#">Calvin</a></li>

  <li><a href="#">Christina</a></li>

  <li><a href="#">Cindy</a></li>

</ul>




</body>

</html>


查看完整回答
反對 回復(fù) 2023-11-02
?
蠱毒傳說

TA貢獻1895條經(jīng)驗 獲得超3個贊

你可以用startsWith它代替。

if?(txtValue.toUpperCase().startsWith(filter))


查看完整回答
反對 回復(fù) 2023-11-02
?
holdtom

TA貢獻1805條經(jīng)驗 獲得超10個贊

 // this function will help you to filter array on the basis of first // letter or word

const collections = ["Ali","Ali and Asif", "Umar OR usman"];

const searchByMultipleWords = (

  collections,

  value

) => {

  return collections.filter((collection) => {

    const collectionName = collection

      ? collection.toLowerCase()

      : "";


    return collectionName.startsWith(value.toLowerCase());

  });

};

console.log(searchByMultipleWords(collections,"ali"))


查看完整回答
反對 回復(fù) 2023-11-02
?
慕尼黑的夜晚無繁華

TA貢獻1864條經(jīng)驗 獲得超6個贊

您可以使用startsWith()函數(shù)來獲取結(jié)果。


function myFunction() {

  var input, filter, ul, li, a, i, txtValue;

  input = document.getElementById("myInput");

  filter = input.value.toUpperCase();

  ul = document.getElementById("myUL");

  li = ul.getElementsByTagName("li");

  for (i = 0; i < li.length; i++) {

    a = li[i].getElementsByTagName("a")[0];

    txtValue = a.textContent || a.innerText;

    if (txtValue.toUpperCase().startsWith(filter)) {

      li[i].style.display = "";

    } else {

      li[i].style.display = "none";

    }

  }

}

<!DOCTYPE html>

<html>


<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>


<body>


  <h2>My Phonebook</h2>


  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">


  <ul id="myUL">

    <li><a href="#">Adele</a></li>

    <li><a href="#">Agnes</a></li>

    <li><a href="#">Agitha</a></li>


    <li><a href="#">Billy</a></li>

    <li><a href="#">Bob</a></li>


    <li><a href="#">Calvin</a></li>

    <li><a href="#">Christina</a></li>

    <li><a href="#">Cindy</a></li>

  </ul>




</body>


</html>


查看完整回答
反對 回復(fù) 2023-11-02
?
楊__羊羊

TA貢獻1943條經(jīng)驗 獲得超7個贊

function myFunction() {

    var input, filter, ul, li, a, i, txtValue;

    input = document.getElementById("myInput");

    filter = input.value.toUpperCase();

    let filterLength = filter.length;

    ul = document.getElementById("myUL");

    li = ul.getElementsByTagName("li");

    for (i = 0; i < li.length; i++) {

        a = li[i].getElementsByTagName("a")[0];

        txtValue = a.textContent || a.innerText;

        if (txtValue.substr(0, filterLength).toUpperCase() === filter) {

            li[i].style.display = "";

        } else {

            li[i].style.display = "none";

        }

    }

}


查看完整回答
反對 回復(fù) 2023-11-02
?
POPMUISE

TA貢獻1765條經(jīng)驗 獲得超5個贊

你應(yīng)該使用startsWith()而不是indexOf()

在你的JS中替換if (txtValue.toUpperCase().indexOf(filter) > -1)

和if (txtValue.toUpperCase().startsWith(filter))


function myFunction() {

? var input, filter, ul, li, a, i, txtValue;

? input = document.getElementById("myInput");

? filter = input.value.toUpperCase();

? ul = document.getElementById("myUL");

? li = ul.getElementsByTagName("li");

? for (i = 0; i < li.length; i++) {

? ? a = li[i].getElementsByTagName("a")[0];

? ? txtValue = a.textContent || a.innerText;

? ? if (txtValue.toUpperCase().startsWith(filter)) {

? ? ? li[i].style.display = "";

? ? } else {

? ? ? li[i].style.display = "none";

? ? }

? }

}

* {

? box-sizing: border-box;

}


#myInput {

? background-image: url('/css/searchicon.png');

? background-position: 10px 12px;

? background-repeat: no-repeat;

? width: 100%;

? font-size: 16px;

? padding: 12px 20px 12px 40px;

? border: 1px solid #ddd;

? margin-bottom: 12px;

}


#myUL {

? list-style-type: none;

? padding: 0;

? margin: 0;

}


#myUL li a {

? border: 1px solid #ddd;

? margin-top: -1px;

? /* Prevent double borders */

? background-color: #f6f6f6;

? padding: 12px;

? text-decoration: none;

? font-size: 18px;

? color: black;

? display: block

}


#myUL li a:hover:not(.header) {

? background-color: #eee;

}

<!DOCTYPE html>

<html>


<head>

? <meta name="viewport" content="width=device-width, initial-scale=1">


</head>


<body>


? <h2>My Phonebook</h2>


? <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">


? <ul id="myUL">

? ? <li><a href="#">Adele</a></li>

? ? <li><a href="#">Agnes</a></li>

? ? <li><a href="#">Agitha</a></li>


? ? <li><a href="#">Billy</a></li>

? ? <li><a href="#">Bob</a></li>


? ? <li><a href="#">Calvin</a></li>

? ? <li><a href="#">Christina</a></li>

? ? <li><a href="#">Cindy</a></li>

? </ul>




</body>


</html>


查看完整回答
反對 回復(fù) 2023-11-02
  • 6 回答
  • 0 關(guān)注
  • 349 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號