skip to Main Content

Ok so Iv’e recently been trying to use twitter typeahead along with bootstrap tagsinput which is found here http://timschlechter.github.io/bootstrap-tagsinput/examples/

I wan’t it to send a query to my database and display username’s as I type the input tags which I know is possible because it says so on the tagsinput page linked above. Although I have tried countless way’s of doing it using bloodhound and it just doesn’t seem to be working.

Below is my HTMLJavascript

<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>

And Here is the php code from 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);

?>

2

Answers


  1. Chosen as BEST ANSWER

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

    Apparently the official one from twitter no longer works with bootstrap 3. So I got a new .js file from here and it seems to work with the following code.

    <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>
    

    But I am still failing to get it to work with my search.php?query file so any further help will be appreciated!


  2. In your code you have $('#remote .input').typeahead( in the JS. However the input in the div with id remote, has no class input. so it should be $('#msgUser').typeahead(

    Edit:
    This is a piece of my typeahead with a remote ajax call. It has a custom template for the search result so you can skip that part

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

    Just check if you can do something with this piece of code to make it work for you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search