jQuery的自動完成自定義HTML結果

Question

我建設使用jQuery UI自動完成搜索（http://jqueryui.com/demos/autocomplete/）

我也利用jQuery UI的自動完成HTML擴展，所以我可以根據類別中，風格很好的搜索和顯示的圖標搜索結果是

我的問題是，當我點擊它看起來像這樣的結果：

(Category Icon) Pink Floyd - Category 

它出來像這樣在搜索輸入字段：

<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>Pink floyd<div class="autocomplete_category"> Rock</div><div class="artist_id_search">15</div><div class="artist_name_search">pink-floyd</div> 

這是我的search.php看起來像：

if (isset($_GET['term'])){ 
    $return_arr = array(); 

    try { 
     $conn = new PDO("mysql:host=".DB_SERVER.";port=8889;dbname=".DB_NAME, DB_USER, DB_PASSWORD); 
     $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

     $stmt = $conn->prepare('SELECT url_name,name,category,id FROM artists WHERE name LIKE :term OR category LIKE :term LIMIT 10'); 
     $stmt->execute(array('term' => '%'.$_GET['term'].'%')); 

     while($row = $stmt->fetch()) { 
      if($row['category'] == '1') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_rock.png" class="search_pic_radius"></div>'; } 
      if($row['category'] == '2') { $category_icon = '<div class="search_icons"><img src="images/ico/search_icon_pop.png" class="search_pic_radius"></div>'; } 

      $return_arr[] = $category_icon . $row['name'] . '<div class="autocomplete_category"> ' . $row['category'] . '</div>'. '<div class="artist_id_search" id="artist_id_search">' . $row['id'] . '</div>'. '<div class="artist_name_search" id="artist_name_search">' . $row['url_name'] . '</div>' ; 

     } 

    } catch(PDOException $e) { 
     echo 'ERROR: ' . $e->getMessage(); 
    } 

    echo json_encode($return_arr); 
} 

我想要實現的是，上自動完成的東西，當點擊它應提交表單和上次值2個div的artist_id_search和artist_name_search等提交下一個頁面將成爲whatever.php?id=15&artist=pink-floyd

我曾嘗試是要從具備分割功能搜索字符串不必要的部分，但那時我剛剛結束了與id和url_name參數在搜索領域並沒有真正實現任何東西，但它並沒有真正可靠地改變圖標名稱等。

Answer 1

好，而不是從你在JSON取得PHP服務返回的HTML，你應該在

[ 
{"id":"15","name":"pink-floyd","value":"Pink Floyd"}, 
{... 
] 

形式傳回正確的JSON像當年處理它在你的JavaScript爲：

$("#your_input_id").autocomplete({ 
     source: "your_php_page.php", 
     minLength: 2, 
     select: function(event, ui) {//callback function when you select an item 
     log(ui.item ? 
      "Selected: " + ui.item.value + " aka " + ui.item.id : 
      "Nothing selected, input was " + this.value); 
     window.location.href = 'whatever.php?id=ui.item.id&artist=ui.item.name'; 
     } 
    }); 

希望你得到它排序:)