Typeahead获取远程数据问题

I have some products in my database and I have used an input field for searching products. I am using Typeahead for search products with remote data. My database for products is like this

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');

And the html with js is like this

<!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>

In ajax.php I have used my custom query like this

$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);

here its in array I am getting the products name like this

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

with json I am also getting the data like this

["Bat","Box"]

But I don't know why the values are not coming in the search dropdown box? Any help and suggestions will be really appreciable. Thanks

Note In console I am getting error like

Uncaught TypeError: Cannot read property 'length' of undefined

查看全部
dtyqflrr775518
dtyqflrr775518
2014/12/22 05:31
  • php
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复