Question

我的数据库中有一些产品，我使用输入字段搜索产品。我正在将Typeahead用于包含远程数据的搜索产品。我的产品数据库是这样的

CREATE TABLE IF NOT EXISTS `products` (
  `id_product` int(10) unsigned NOT NULL,
  `name` varchar(128) NOT NULL,
  `desc` text,
  PRIMARY KEY (`id_product`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `products`
--

INSERT INTO `products` (`id_product`, `name`, `desc`) VALUES
(1,  'Apple', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Box ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Bat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Cat ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry'),
(2,  'Ant ', 'Lorem Ipsum is simply dummy text of the printing and typesetting industry');

使用js的html就像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="js/typeahead.bundle.js"></script>  
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="jquery.typeahead.css">
<style>
.tt-query,
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
}

.tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999
}

.tt-dropdown-menu {
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor {
    color: #fff;
    background-color: #0097cf;

}
</style>
<script type='text/javascript'>
        //<![CDATA[ 
        $(window).load(function () {
            // instantiate the bloodhound suggestion engine
            var products = new Bloodhound({
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace,
                remote: {
                    url: 'ajax.php?search_term=%QUERY',
                    filter: function (products) {
                        return $.map(products.results, function (product) {
                            return {
                                value: product.name
                            };
                        });
                    }
                }
            });
            // initialize the bloodhound suggestion engine
            products.initialize();
            // instantiate the typeahead UI
            $('.typeahead').typeahead(null, {
                displayKey: 'value',
                source: products.ttAdapter()
            });
        }); //]]>
    </script>   
</head>
<body>
    <input class='typeahead' placeholder='Find products...' type='text' />
</body>
</html>

在ajax.php中，我使用了我的自定义查询

$dsn = 'mysql:host=localhost; dbname=products';
$username = 'root';
$password = 'root';
$options = array(
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
); 

$dbh = new PDO($dsn, $username, $password, $options);
$query = $_REQUEST['search_term'];
$stmt = $dbh->prepare("SELECT name from `products` WHERE `name`  LIKE '%".$query."%' ");
$stmt->bindParam(':query', $query, PDO::PARAM_STR);
$stmt->execute();

// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {
    $results[] = $row;
}
print_r($results);

// and return to typeahead
echo json_encode($results);

这里是数组我得到的产品名称是这样的

Array
(
    [0] => Bat
    [1] => Box
)

使用json我也得到像这样的数据

["Bat","Box"]

但我不知道为什么这些值不会出现在搜索下拉框中？任何帮助和建议都会非常明显。感谢

注意在控制台中，我收到错误，如

Uncaught TypeError: Cannot read property 'length' of undefined

Answer 1

因为你的预先输入js代码是

                filter: function (products) {
                    return $.map(products.results, function (product) {
                        return {
                            value: product.name
                        };
                    });
                }

即products.results.name您需要格式化您的php数组，以便正确返回json对象

// populate results
$results = array();
foreach ($stmt->fetchAll(PDO::FETCH_COLUMN) as $row) {

    //add to 'results' with array with key 'name'
    $results['results'][] = array('name'=>$row);

}

// and return to typeahead
echo json_encode($results);

Typeahead获取远程数据问题

1 个答案: