CSS 属性値正規マッチングセレクターの使い方 (ヒント)

[href] {パディング左: 18px;}
/* リンクアドレス*/
[href^="https"],
[href^="//"] {
    背景: url("./images/link.png") 繰り返しなし 左;
}
/* ウェブページ内のアンカーリンク */
[href^="#"]
    背景: url("./images/anchor.png") 繰り返しなし 左;
}
/* 携帯電話とメール */
[href^="電話番号:"]
    背景: url("./images/tel.png") 繰り返しなし 左;
}
[href^="メール送信先:"]
    背景: url("./images/e-mail.png") 繰り返しなし 左;
}

/* PDF ファイルを指す */
[href$=".pdf"]
    背景: url("./images/pdf.png") 繰り返しなし 左;
}
/* zipファイルをダウンロード */
[href$=".zip"] {
    背景: url("./images/zip.png") 繰り返しなし 左;
}
/* 画像リンク*/
[href$=".png"],
[href$=".gif"],
[href$=".jpg"],
[href$=".jpeg"],
[href$=".webp"]
    背景: url("./images/image.png") 繰り返しなし 左;
}

<input type="search" id="input" placeholder="都市名またはピンインを入力してください" />
<ul>
    <li data-search="重慶市chongqing">重慶市</li>
    <li data-search="ハルビン市haerbin">ハルビン市</li>
    <li data-search="長春市changchun">長春市</li>
    <li data-search="長沙市長沙">長沙市</li>
    <li data-search="沪shanghai">上海</li>
    <li data-search="杭州市杭州">杭州市</li>
</ul>

var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// テキスト入力ボックス input.addEventListener('input', function() {
    var 値 = this.value.trim();
    eleStyle.innerHTML = value ? '[data-search]:not([data-search*="' + value +'"]) { display: none; } ' : '';
});