Jquery автозаполнения пользовательских HTML результаты

Question

Я строю поиск с JQuery UI автозаполнения (http://jqueryui.com/demos/autocomplete/)

Я также используя JQuery UI автозаполнения HTML Extension, чтобы я мог стиль поиска красиво и значки дисплея в зависимости от категории, где результат поиска в

Моя проблема, когда я нажимаю на результат, который выглядит следующим образом:.

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

То, что я пытаюсь достичь, при нажатии на что-то на автозаполнения он должен отправить форму со значением от последнего два DIV artist_id_search и игровая artist_name_search так далее представить на следующей странице станет whatever.php?id=15&artist=pink-floyd

то, что я пытался, чтобы удалить ненужные части из строки поиска с функцией разделенного, но тогда я только закончил с id и url_name параметров в поле поиска, которые на самом деле ничего не добились и на самом деле не работали надежно с меняющимися именами и т. Д.

Answer 1

Ну вместо возвращения HTML с PHP службы вы сделали в формате JSON, вы должны возвращать правильное JSON, как в виде

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

затем обрабатывать его в 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'; 
     } 
    }); 

Надеюсь, что вы его отсортировали :)