Typeahead, чтобы показать несколько значений

Question

У меня есть Bootstrap tyepahead, который получает данные из моей базы данных. Вместо того, чтобы просто возвращать одно слово из базы данных (имя пользователя), я хочу иметь возможность возвращать несколько значений (ссылку на изображение и другую информацию из базы данных).

HTML и JQuery/Ajax:

<input class="typeahead" type="text" data-provide="typeahead" autocomplete="off" placeholder="Type something..."> 

<script> 
    $('.typeahead').typeahead({ 
     source: function (query, process) { 
      $.ajax({ 
       url: 'php/script.php', 
       type: 'POST', 
       dataType: 'JSON', 
       data: 'query=' + query, 
       success: function(data) { 
        process(data); 
       } 
      }); 
     } 
    }); 
</script> 

PHP:

<?php 

    include_once("connect_info.php"); 

    $cxn = mysqli_connect($host, $user, $pass, $db) or die ("Couldn't connect to the server. Please try again."); 

    $return = array(); 

    if(isset($_POST['query'])){ 
     $stmt = $cxn->prepare('SELECT user_id FROM users WHERE username LIKE concat("%", ?, "%")'); 
     $stmt->bind_param('s', $_POST['query']); 
     $stmt->execute(); 

     while ($row = $result->fetch_assoc()) { 
      $return[] = $row['user_id']; 
     } 
    } 

    $json = json_encode($return); 
    print_r($json); 

?> 

Как бы это сделать?

Answer 1

решаемого это сам, это было намного проще, чем я думал, что это будет

Вот мой новый код:.

HTML и jQuery/Ajax:

<input class="typeahead" type="text" data-provide="typeahead" autocomplete="off" placeholder="Type something..."> 

<script> 
    $('.typeahead').typeahead({ 
     source: function (query, process) { 
      $.ajax({ 
       url: 'php/script.php', 
       type: 'POST', 
       dataType: 'JSON', 
       data: 'query=' + query, 
       success: function(data) { 
        process(data); 
       } 
      }); 
     }, 
     highlighter: function(data) { 
      var parts = data.split(','), 
      html = '<img src="pictures/' + parts[0] + '.jpg" />'; 
      html += '<div class="info">' + parts[1] + '</div>'; 
      return html; 
     }, 
    }); 
</script> 

PHP:

<?php 

    include_once("connect_info.php"); 

    $cxn = mysqli_connect($host, $user, $pass, $db) or die ("Couldn't connect to the server. Please try again."); 

    $return = array(); 

    if(isset($_POST['query'])){ 
     $stmt = $cxn->prepare('SELECT user_id, username FROM users WHERE username LIKE concat("%", ?, "%")'); 
     $stmt->bind_param('s', $_POST['query']); 
     $stmt->execute(); 

     while ($row = $result->fetch_assoc()) { 
      $return[] = $row['user_id'] . ',' . $row['username']; 
     } 
    } 

    $json = json_encode($return); 
    print_r($json); 

?> 

Answer 2

Вы можете вернуть массив объектов Json. как [{user_name: «XYZ», image_link:»http://www.mysite.com/my_image} ....] я сделать это таким образом, в питона, я уверен, что вы можете сделать то же самое в PHP

Пожалуйста, обратите внимание на. . последний пример [лучший победитель изображения] на странице примеров машинописного http://twitter.github.io/typeahead.js/examples/