2011-05-18 224 views
1

我目前正在一個項目中,我需要一個自動完成表單調用它從db文件中的信息。我看過很多關於jquery自動完成表單的教程,但我不知道如何調用db文件來填充列表。由數據庫填充的自動填充表單?

我正在使用PHP。目前代碼表示一個簡單的下拉框,它調用db文件進行填充。

<?php 
    global $wpdb; 
    $depts = $wpdb->get_results("SELECT * FROM departments ORDER BY department_name ASC"); 
    echo '<select>'; 

    foreach($depts as $row) { 
     echo '<option name="select_dept" value="'.$row->department_id.'">'.$row->department_name.'</option>'; 
    } 
    echo '</select>'; 
?> 

任何幫助都會很棒!

回答

1

最近我已經使用這個庫的自動完成 - http://www.devbridge.com/projects/autocomplete/jquery/ 所以這裏是一個基於你的簡短腳本:

<?php 

$query = isset($_GET['query']) ? $_GET['query'] : FALSE; 

if ($query) { 
    global $wpdb; 
    // escape values passed to db to avoid sql-injection 
    $depts = $wpdb->get_results("SELECT * FROM departments WHERE department_name LIKE '".$query."%' ORDER BY department_name ASC"); 

    $suggestions = array(); 
    $data = array(); 
    foreach($depts as $row) { 
     $suggestions[] = $row->department_name; 
     $data[] = $row->department_id; 
    } 
    $response = array(
     'query' => $query, 
     'suggestions' => $suggestions, 
     'data' => $data, 
    ); 
    echo json_encode($response); 
} else { 
?> 
<html> 
<body> 
<input type="text" name="" id="box" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="http://www.devbridge.com/projects/autocomplete/jquery/local/scripts/jquery.autocomplete.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('#box').autocomplete({ 
     serviceUrl:'/', 
     // callback function: 
     onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); }, 
    }); 
}); 
</script> 
</body> 
<html> 
<?}?> 
+0

死鏈接。請更新。 – 2018-02-26 17:46:12

1

請遵循本寫得很好的教程

http://www.nodstrum.com/2007/09/19/autocompleter/

+0

感謝您的快速響應!不過,我正在尋找一種「便宜」的方法,只需在同一頁面內使用javascript和php,並調用db文件即可。 – captainrad 2011-05-18 15:41:08

+0

@captainrad - 完全沒問題 - 但我不知道多少「便宜」你會得到它 – Rob 2011-05-18 15:42:55

0

JQuery UI包括自動完成,儘管您仍然需要編寫一個PHP腳本來返回要添加到控件中的信息,就像通過AJAX完成的那樣。如果您在PHP中知道如何連接到數據庫,查詢它並返回結果列表 - 那麼您將不會遇到任何問題。 JQuery使AJAX非常簡單。

根據您的現場/數據集是多麼複雜 - 並在數以百萬計的沒有索引的記錄,假設它不是幾百萬,我將內容從自動完成:如果你正在尋找

SELECT thing WHERE thing LIKE '".$query."%' 

所以,說,食物...查詢「CA」將拉出CArrot和CAbbage和花椰菜。如果你在LIKE的開頭添加了一個%,你可以得到包含你的查詢的結果,而不是僅僅從它開始。

用戶點擊的頁面將包含JQuery部分,它既發送請求,又從結果創建自動完成效果,並且AJAX請求命中的非常簡單的單獨PHP腳本將返回潛在的「匹配」。

看看Autocomplete demos on JQuery UI