jQuery UI自動完成顯示AJAX源的標籤和值

我有jQuery UI自動完成輸入與AJAX源，我想顯示標籤，而不是ID;但是我的代碼在搜索結果返回時顯示。我怎樣才能顯示標籤？jQuery UI自動完成顯示AJAX源的標籤和值

PHP：

<?php 
require_once '../php/db_conx.php'; 
$req = "SELECT * 
     FROM ads 
     WHERE bbookname LIKE '%" . strtolower(mysql_real_escape_string($_REQUEST['term'])) . "%' "; 
$query = mysql_query($req); 
while ($row = mysql_fetch_array($query)) { 
    $return = array(
     'label' => $row['bbookname'] . ' ' . $row['bbookschool'], 
     'value' => $row['adid'] 
    ); 
} 
echo json_encode($return); 
?>

的jQuery/AJAX：

$("#BooksSearchInput").autocomplete({ 
    source: '../Search/BP_Books_Search.php', 
    minLength: 1, 
    autoFocus: false, 
    select: function(event, ui) { 
     var SearchBookVal = (ui.item.value) 
     $.ajax({ 
      type: "POST", 
      data: { 
       data: SearchBookVal 
      }, 
      url: "../php/SearchBooks_results.php" 
     }).done(function(feedback) { 
      $('#booksads').html(feedback) 
     }); 
    } 
});

請注意，我確實需要的adid在JavaScript回調可用，因爲我用這個來引用結果。

來源

2013-12-14 Relm

自己運行你的php代碼（不要從客戶端代碼中調用它）並查看屏幕上彈出的內容。這可以幫助您將代碼解析爲您想要的數據。如果您的書籍數量不是很多，則可以調用將所有書籍傳遞給客戶端的php代碼，然後讓客戶端自動完成迭代選擇。 – TimSPQR

Drat，這兩個PHP腳本是做什麼的（BP_Books_Search.php和SearchBooks_results.php）？ –

這個問題存在一些嚴重的含糊之處。提問者顯然沒有花費大量的時間閱讀代碼，並且無法清晰地表達他想要實現的目標 –

你手上有幾件事情錯在你的代碼。

首先，在PHP腳本以下行：

$return = array(...)

意味着返回變量將在每次迭代被覆蓋，並且結果總是與一個項（或PHP警告和陣列字符串null如果找不到匹配的行）。要解決：

$return = array(); 
while ($row = mysql_fetch_array($query)) { 
    $return[] = array(
     "label" => $row["bbookname"] . " " . $row["bbookschool"], 
     "value" => $row["adid"], 
     // you can add additional keys without causing problems 
     "feedback" => $row["feedback"] 
    ); 
} 
echo json_encode($return);

其次，顯示在文本框中的標籤，你可以使用代碼onFocus和onSelect從this answer：

// ... 
focus: function (event, ui) { 
    event.preventDefault(); 
    $(this).val(ui.item.label); 
}, 
select: function (event, ui) { 
    event.preventDefault(); 
    $(this).val(ui.item.label); 
    $("#booksads").html(ui.item.feedback); 
} 
// ...

來源

2013-12-17 06:43:50

在自動完成的jQuery文檔中也引用了onFocus/onSelect方法：http://jqueryui.com/autocomplete/#custom-data – cincodenada

我看到一些與發佈代碼有關的問題。首先，你返回的json將總是隻返回一行，即最後一行，因爲你在每個循環覆蓋$ return。這是代碼應該如何閱讀

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool'], 
'value' => $row['adid'] 
);

這將返回所有匹配的行。其次，你在數組鍵值中包含數組中的數據庫值。如果您不想顯示數據庫ID，請不要將它包含在返回的json中。

$return[] = array ('label' => $row['bbookname'] . ' '.$row['bbookschool');

如果您需要在返回的JSON數據庫ID，但不希望將其顯示在屏幕上，你應該改變返回的數據的處理方式。現在，您將通過調用HTML函數將整個結果集輸出到屏幕上。

您的查詢使用了不推薦的mysql_query函數，它正在查找$ _REQUEST ['term']，但您的ajax代碼正在使用數據作爲變量名發送該值。

data: {data:SearchBookVal},

它也許應該讀

data: {term:SearchBookVal},

來源

2013-12-17 06:31:31 Robbert

如果您從php中刪除'adid'，ajax將無法獲得正在搜索的結果的ID，並且我無法在單擊時參考結果。 – Relm

我編輯了我的回覆以解決這個問題。如果您不希望數據庫ID顯示在屏幕上，則需要更改在ajax調用中顯示結果的方式。 – Robbert

使用的警報或記錄上看到哪個對象UI的屬性，adid被存儲，嘗試

alert(JSON.stringify(ui));

來源

2013-12-17 09:54:38 sumit

在從自動完成列表中選擇一個項目時，文本框顯示了該項目的'value'屬性項目。如果您希望bookschool的書名顯示爲值，則可以使用與標籤相同的字符串串聯。由於您需要ajax請求的adid，您可以爲此添加一個附加參數。例如，

$ return = array（）;

而（$行= mysql_fetch_array（$查詢））

{

$dataItem = array (

    'label' => $row['bbookname'] . ' '.$row['bbookschool'], 

    'value' => $row['bbookname'] . ' '.$row['bbookschool'], 

    'id' => $row['adid'] 

); 

$return.push($dataItem);

}

編輯：要返回所有的查詢返回，你必須構建行包含結果的值數組，並返回該數組。相反，當前的代碼將只返回查詢結果的最後一行。

來源

2013-12-18 12:15:17 Jazmin

嘗試這樣的事情

$main_arr = array(); 
while($row = mysql_fetch_array($query)) 
{ 
    $json_arr = array(); 
    $json_arr['label'] = $row['bbookname'] . ' '.$row['bbookschool']; 
    $json_arr['value'] = $row['adid']; 
    array_push($main_arr,$json_arr); 
} 
echo json_encode($main_arr);

來源

2013-12-21 07:41:27

試試這個：

$return = array(); 
array_push($return,array("value"=>$row['adid'],"label"=>$row['bbookname'] . ' '.$row['bbookschool'])); 
$json = json_encode($return); 
echo $json;

和使用下面的文本框中顯示標籤：

$('#booksads').html(ui.item.label) //if you want display value then change it to ui.item.value

或see these

來源

2013-12-21 12:07:25 DS9

jQuery UI自動完成顯示AJAX源的標籤和值

回答

相關問題