尝试在输入框中实现实时搜索答案

【问题标题】：trying to implement live search in a input box尝试在输入框中实现实时搜索
【发布时间】：2023-04-05 02:52:01
【问题描述】：

我正在尝试在文本框中实现实时搜索，来自服务器的选项列表，如果该项目不可用，它应该动态添加，比如如果我输入“gre”并选择它，它应该添加到列表或者它应该显示在列表的顶部

代码： https://www.codeply.com/go/d6WaXok32m

在代码中指定，元素'entranceExamSearch'输入框包含项目列表

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

这段代码会给你一些想法。

HTML：

<input type="text" id="searchPro" />
Your all the dynamic result will be show inside the div
<div id="searchLog"></div>

jQuery：

$("#searchPro").autocomplete({
    source: function(request,response) {
        $.ajax({
            url: "php.func.php",
            type: "POST",
            data: { term: request.term },
            success: function (searchData) {
                $('#searchLog').html(searchData);
            }
        })
    }
});

PHP：php.func.php

$find = "SELECT * 
        FROM tbl_products
        WHERE (`product_name` LIKE '%".$_REQUEST['term']."%')";

$resset = $conn->query($find);
    while ($res = mysqli_fetch_object($resset)) {
    $findRes[] = $res;
}
if (!empty($findRes)) {
    foreach ($findRes as $ResultSet) {
        echo "<tr><td>".$ResultSet->product_name."</td>";
    }
}else{
    echo "<p>No Result Found for keyword <b>".$_REQUEST['term']."</b>..<p><hr/>";
}

这里是链接：[JQuery 自动完成][1]

这是我在项目中使用的基本参考代码。您可以根据需要进行修改。希望这会帮助你。更多https://jqueryui.com/autocomplete/

【讨论】：