Typeahead получить удаленную проблему с данными

У меня есть некоторые продукты в моей базе данных, и я использовал поле ввода для поиска продуктов. Я использую Typeahead для поиска продуктов с удаленными данными. Моя база данных для продуктов, как этот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');

И HTML с JS, как это

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

источник

2014-12-22 NewUser

Какие ошибки вы получаете в консоли? –

У вас есть 'return {value: product.name};' но ваш json не имеет ключей 'name'. Возможно, попробуйте '$ results [] = array ('name' => $ row);' в вашем 'ajax.php' – Sean

@Sean все еще я получаю результаты. В консоли я получаю ошибку, например 'Uncaught TypeError: Не могу прочитать свойство 'length' undefined' – NewUser

С вашего typehead расслоение плотной код

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

источник

2014-12-22 06:17:56 Sean

Typeahead получить удаленную проблему с данными

ответ

Смежные вопросы