trying to implement live search in a input box

问题

i'm trying to implement live search in a textbox, the list of options coming from the server, if the item is not available it should add dynamically, like if i type "gre" and selects that, it should added to the list or it should show in the top of the lists

Codeply : https://www.codeply.com/go/d6WaXok32m

as specified in the code, the element 'entranceExamSearch' input box contails list of items

回答1:

This code will give you some idea.

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/>";
}

Here is the link: [JQuery Autocomplete][1]

This is for your basic reference code i have use in my project. you can modify as per your need. Hope this will help you. For more https://jqueryui.com/autocomplete/

来源：https://stackoverflow.com/questions/44390442/trying-to-implement-live-search-in-a-input-box

标签

html

css

twitter-bootstrap

bootstrap-modal