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

Question

The jQuery autocomplete function brings the item from the database based on my typing word but result shows as just horizontal line of list. Attached image is showing how the result looks like.

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

OK got it. You are passing wrong key in your result. Your result data key is "product_name" And You are trying to access "label ". Try This solution:

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

 },