與typeahead.js苦苦掙扎

我希望得到一個簡單的演示，瞭解Twitter typeahead.js庫的一些幫助，因爲我在過去兩天中一直在努力。與typeahead.js苦苦掙扎

我在我的Macbook上使用MAMP開發服務器，並且有一個（大型）MySQL數據庫表，我想查詢它與Web頁面上的typeahead字段一起使用。

這是我使用的主要HTML文件。它從字面上有一個領域。

type-ahead.php 
<?php 
// HTML5 Header stuff 
echo '<!DOCTYPE html>'.PHP_EOL; 
echo '<html>'.PHP_EOL; 
echo '<head><meta charset="UTF-8">'.PHP_EOL; 
echo '<title>Typeahead Example</title>'.PHP_EOL; 

// include the two libraries for typeahead to work 
echo '<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script>'.PHP_EOL; 
echo '<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script>'.PHP_EOL; 
echo '</head>'.PHP_EOL; 

echo '<body>'.PHP_EOL; 

echo '<h2 class="myclass">Typeahead testing</h2>'.PHP_EOL; 
echo 'Type in a search: <input type="text" name="user_search">'.PHP_EOL; 

echo "<script type='text/javascript'>".PHP_EOL; 
echo "$('#user_search').typeahead({".PHP_EOL; 
echo " name: 'user_search',".PHP_EOL; 
echo " remote: './type-ahead-ajax.php?query=%QUERY',".PHP_EOL; 
//echo " minLength: 3,".PHP_EOL; 
//echo " limit: 10".PHP_EOL; 
echo "});".PHP_EOL; 
echo "</script>".PHP_EOL; 

echo '</body></html>'.PHP_EOL; 
?>

這個來自瀏覽器的源代碼看起來不錯，但我也會在這裏粘貼它，以防萬一。

<!DOCTYPE html> 
<html> 
<head><meta charset="UTF-8"> 
<title>Typeahead Example</title> 
<script src="../jQuery/jquery-2.0.3.min.js" type="text/javascript"></script> 
<script src="../typeahead.js/typeahead.min.js" type="text/javascript"></script> 
</head> 

<body> 

Type in a search: <input type="text" name="user_search"> 

<script type='text/javascript'> 
$('#user_search').typeahead({ 
    name: 'user_search', 
    remote: './type-ahead-ajax.php?query=%QUERY', 
}); 
</script> 
</body></html>

我已經測試了我的回調腳本分開，它肯定連接到數據庫並拉回一些結果。例如，如果我使用「/type-ahead-ajax.php?query=bleach」作爲一個網址，我得到的所有包含單詞「漂白」

type-ahead-ajax.php 
<?php 

// Connect to the database 
try { 
$dbh = new PDO('mysql:host=localhost; dbname=menu;', 'root', 'root'); 

    $query = '%'.$_GET['query'].'%'; // add % for LIKE query later 

    //$query = '%milk%'; //debug 
    echo $query.PHP_EOL; 

    // do query 
    $stmt = $dbh->prepare('SELECT title FROM waitrose WHERE title 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; 
     echo strtolower($row).PHP_EOL; //debug 
    } 
    $dbh = null; 
} catch (PDOException $e) { 
     print "Error!: " . $e->getMessage() . "<br/>"; 
     die(); 
} 

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

?>

基本上，該產品當你輸入到輸入字段什麼都沒發生。就好像這個回調沒有被調用，它沒有任何返回，或者它沒有被正確註冊。

有什麼建議嗎？

來源

2014-01-21 DA Morrison

小更新。我可以在Javascript控制檯中看到事件實際上正在觸發，因爲如果我爲回調頁面指定了錯誤的URL，則每次在字段中輸入字符時都會看到404錯誤。 –

當你做$('#user_search')，你指的是一個ID爲user_search的元素。但是，您沒有給出您的input任何ID。添加：

<input type="text" name="user_search" id="user_search">

如果還是不行，請確保你得到你的一些查詢手動accesssing ./type-ahead-ajax.php?query=%QUERY假設數據，併爲您在您的瀏覽器控制檯JavaScript錯誤。

來源

2014-01-21 18:50:06 kba

嗨 - 很好的ID，但即使補充說，它仍然不適合我。我也測試了回調，腳本肯定會返回一個項目列表。例如'http：// localhost：8888/menubuilder/type-ahead-ajax.php？query = shredded％20wheat' give me「nestle bitesize shredded wheat nestle shredded wheat」 –

@DAMorrison：你的輸出來自echo strtolower（ $ row）.PHP_EOL;'，刪除它。相反，讓它打印你的JSON：在'return json_encode（$ results）;'中將'return'更改爲'print'。 – kba

與typeahead.js苦苦掙扎

回答

相關問題