80行代码完整实现ajax输入框即时下拉提示并去重

 80行代码(html+css+js+php)完整实现ajax输入框即时下拉提示

提示词去重，提示最新20个以节约消耗，提示部分跟随输入框, 宽度和输入框同。

<?php
if($_GET["t"]=="tips"){
$keyword = $_GET['keyword'];
if($keyword=="") exit("['请输入']");
$file = fopen('suggest.csv', 'r');
$data = array();
while (($row = fgetcsv($file,0,"\t")) !== false) {
 if (strpos($row[0], $keyword) !== false) { $data[$row[0]] = $row[0]; }
 if (count($data)>20) break; //最多显示提高性能
}
fclose($file);
echo json_encode(array_keys($data));
exit();
}
?>
<br><br><br><br><br>
<div class="search-box">
 <input type="text" id="search-input" placeholder="请输入关键词">
 <button id="search-btn">搜索</button>
 <div id="search-suggest" style="display:none;"></div>
</div>
<style>
.search-box { position: relative; display: inline-block;}
#search-input { width: 300px; height: 32px; padding: 5px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px;}
#search-btn { position: absolute; right: 0; top: 0; width: 60px; height: 32px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; font-size: 14px; cursor: pointer;}
#search-suggest { position: absolute; top: 35px; left: 0; width: 100%; max-height: 300px; overflow-y: auto; background-color: #fff; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); z-index: 9;}
#search-suggest ul { list-style: none; margin: 0; padding: 0;}
#search-suggest li { padding: 5px; cursor: pointer;}
#search-suggest li:hover { background-color: #f5f5f5;}
p{ background-color: gray; line-height:120%; }
</style>
<script>
var searchInput = document.getElementById('search-input');
var searchBtn = document.getElementById('search-btn');
var searchSuggest = document.getElementById('search-suggest');
searchInput.addEventListener('input', function() {
 var keyword = this.value.trim();
 if (keyword) {
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'suggest.php?t=tips&keyword=' + keyword, true);
 xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 var data = JSON.parse(xhr.responseText);
 showSuggest(data);
 }
 };
 xhr.send();
 } else {
 hideSuggest();
 }
});
searchSuggest.addEventListener('click', function(e) {
 var target = e.target;
 if (target.tagName === 'LI') {
 searchInput.value = target.innerText;
 hideSuggest();
 }
});
searchBtn.addEventListener('click', function() {
 var keyword = searchInput.value.trim();
 if (keyword) { window.location.href = '?t=cha&keyword=' + keyword; }
});
function showSuggest(data) {
 var html = '';
 for (var i = 0; i < data.length; i++) {
 html += '<li>' + data[i] + '</li>';
 }
 if(data.length>0){
 searchSuggest.innerHTML = '<ul>' + html + '</ul>';
 searchSuggest.style.display = 'block';
 searchSuggest.style.width = searchInput.offsetWidth + 'px';
 }
}
function hideSuggest() { searchSuggest.style.display = 'none'; }
</script>

数据参考：制表符分隔多列内容，提示词在第一列，推荐去重仅提示词以提高性能。

成语	拼音
一丁不识	yī dīng bù shí
一丁点儿	yī dīng diǎnr
一丁至微	yī dīng zhì wēi
一不作，二不休	yī bù zuò，èr bù xiū
一不做，二不休	yī bū zuò，èr bù xiū
一不压众	yī bù yā zhòng
一不压众，百不随一	yī bù yā zhòng，bǎi bù suí yī
一不扭众	yī bù niǔ zhòng
一不拗众	yī bù niù zhòng
一世两清	yī shì liǎng qīng