javascript - jQuery 自动完成功能根据我输入的单词从数据库中获取项目，但结果显示为列表的水平线

Question

jQuery 自动完成功能根据我输入的单词从数据库中获取项目，但结果仅显示为列表的水平线。附图显示了结果的样子。

HTML:

<form class="navbar-seach pull-center">
    <div>
        <input type="text" placeholder="Search Productstyle="width:550px; height:40px;padding-left: 10px;margin-top: 20px;" id="searchBox" onkeyup="if (event.keyCode === 13) {searchResults(this.value); this.value = '';}">
    </div>
</form>

PHP:

include 'searchbox.php';

$switch_id = filter_input(INPUT_POST, 'switch_id', FILTER_SANITIZE_SPECIAL_CHARS);

if (isset($_POST['name_startsWith']))
    $searchWordResults = $_POST['name_startsWith'];
else
    $searchWordResults = null;

switch($switch_id){
    case 1:
        $userObj = new searchBox();
        echo $userObj->autoComplete($searchWordResults);
        break;
}

jQuery:

$("#searchBox").autocomplete({
    source: function(request, response) {
        $.ajax({
            type: "POST",  
            url: "class/searchbox_switch.php",
            dataType: "json",
            data: { name_startsWith: request.term, switch_id: 1 },
            success: function(data) {
                response($.map(data, function(item){
                    return {
                        label: item.label,
                        value: item.value
                    };
                }));
            },
            error: function(response) {
                console.log(response.responseText);
            }
        });
    },
    autoFocus: true,
    minLength: 1,
    select: function( event, ui ) {
        searchResults(ui.item.label);
    }
});

PHP (searchbox.php):

include '../dbConnect.php';

class searchBox {
    public function autoComplete($name_startsWith) {
        $letterSearch = $name_startsWith . "%";
        $connectObj = new db_connect();
        $dbh = $connectObj->connect();

        $stmt = $dbh->prepare("SELECT product_name FROM products WHERE product_name LIKE :start");
        $stnd = array();
        $stmt->bindParam(':start', $letterSearch, PDO::PARAM_STR);
        $stmt->execute();
        $stnd = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $json = json_encode($stnd);
        return $json;
    }

}

Answer 1

好的，明白了。您在结果中传递了错误的 key 。您的结果数据键是“product_name”并且您正在尝试访问“label”。尝试这个解决方案:

 success: function( data ) {                
          response( $.map( data, function(item) {                    
             return {
                   label: item.product_name,
             }
          }));                    

 },