машинописных с начальной загрузкой tagsinput, MySQL

Question

ИТАК Iv'e недавно пытались использовать твиттер машинописные вместе с бутстраповской tagsinput, который находится здесь http://timschlechter.github.io/bootstrap-tagsinput/examples/

Я wan't его, чтобы отправить запрос к базе данных и отображения имени пользователя в качестве Я набираю теги ввода, которые, как я знаю, возможны, потому что они так говорят на указанной выше странице тегов. Хотя я пробовал бесчисленное множество способов сделать это с помощью ищейки, и он просто не работает.

Ниже мой HTML \ Javascript

<form id="msgForm" action="process2.php" method="POST" name="msgForm" class="form-horizontal" role="form"> 

    <div id="remote" class="input-group" style="padding-bottom:10px;"> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span> 
    <input type="text" class="form-control" name="msgUser" id="msgUser" placeholder="Users Seperated by ," data-role="tagsinput" /> 
    </div> 

    <script> 
    var bestPictures = new Bloodhound({ 
     datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
     queryTokenizer: Bloodhound.tokenizers.whitespace, 
     null, 
     remote: { 
     url: 'search.php?query=%QUERY', 
     wildcard: '%QUERY' 
     } 
    }); 

    $('#remote .input').typeahead(null, { 
     name: 'best-pictures', 
     display: 'value', 
     source: bestPictures 
    }); 
    </script> 

    <i><div style="padding-bottom:7;"id="title_message"></div></i> 
    <div class="input-group" style="padding-bottom:10px;"> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-cog"></span></span> 
     <input type="text" maxlength="30" class="form-control input-md" autocomplete="off" name="msgTitle" id="msgTitle" placeholder="Message Title"/><br /> 
    </div> 

    <i><div style="padding-bottom:7;"id="main_message"></div></i> 
    <div class="input-group"> 
     <span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span> 
     <textarea class="form-control" maxlength="500" rows="5" name="main" id="main" placeholder="Your message..."></textarea> 
    </div> 

    <button type="submit" class="form-control input-md" style="margin-top:20;" name="btnmsg" id="btnmsg">Send Message</button> 
</form> 

И вот это PHP код из search.php:

<?php 

include("functions.php"); 

$param = "{$_GET['query']}%"; 

// do query 
if ($stmt = $con->prepare("SELECT username FROM users WHERE username LIKE ?")) { 
    $stmt->bind_param("s", $param); 
    $stmt->execute(); 
} 

// populate results 
$results = array(); 

$result = $stmt->get_result(); 
while ($row = $result->fetch_array(MYSQLI_NUM)) { 
    foreach ($row as $r) { 
    $results[] = $r; 
    } 
} 

// and return to typeahead 
return json_encode($results); 

?> 

Answer 1

В своем коде вы имеете $('#remote .input').typeahead( в JS. Однако вход в div с id remote не имеет ввода класса. так что это должно быть $('#msgUser').typeahead(

Редактировать: Это часть моего typeahead с удаленным вызовом ajax. Он имеет пользовательский шаблон для результатов поиска, так что вы можете пропустить, что часть

var producten = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    limit: 100, 
    remote: { 
     'cache': false, 
     url: 'ajax/htmlProducten.php?q=%QUERY', 
     wildcard: '%QUERY', 
     filter: function (data) { 
      return data; 
     } 
    } 
}); 
/*data initialiseren */ 
producten.initialize(); 
/* Typeahead gedeelte */ 
$('.typeahead').typeahead(null, { 
    name: 'addZoek', 
    source: producten.ttAdapter(), 
    displayKey: 'artikelNaam', 
    templates: { //here starts the custom display setup 
     suggestion: function (producten) { 
      if(producten.voorraadID!=null) { 
       $style="style='color:red'" 
      } else { 
       $style=''; 
      } 
      if(producten.vers==1){ 
       $vers='(vers)'; 
      } else { 
       $vers=''; 
      } 
      resultaat= '<div '+$style+'>'+ 
       '<strong>' + producten.artikelNaam + ' '+$vers+'</strong>' + 
       '<br>' + producten.inhoud + ' ' + producten.type + ' - ' + producten.artikelMerk + 
      '</div>'; 
     } 
     return resultaat; 
    } 
}); 

просто проверить, если вы можете сделать что-то с этим куском кода, чтобы заставить его работать на вас. не

Answer 2

https://github.com/bassjobsen/Bootstrap-3-Typeahead

Видимо официальные один из твиттера больше не работает с начальной загрузкой 3. Таким образом, я получил новый .js файл здесь и, кажется, работают со следующим кодом.

<div id="remote" class="input-group" style="padding-bottom:10px;"> 
    <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span> 
    <input data-provide="typeahead" autocomplete="off" name="msgUser" id="msgUser" type="text" class="form-control" placeholder="Users Seperated by ," data-role="tagsinput" /> 
</div> 

<script> 
    $('#msgUser').tagsinput({ 
    typeahead: { 
     source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] 
    } 
    }); 
</script> 

Но я до сих пор не в состоянии заставить его работать с моим search.php? Файл запроса так дальше помощь будет оценен по достоинству!