80 lines of code (html+css+js+php) completely implement the instant drop-down prompt of the ajax input box
The prompt words are deduplicated, and the latest 20 are prompted to save consumption. The prompt part follows the input box, and the width is the same as the input box.
<?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>Data reference: Tabs separate the contents of multiple columns, and the prompt words are in the first column. It is recommended to remove duplicates and only prompt words to improve performance.
成语 拼音
一丁不识 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