twitter bootstrap typeahead ajax exemple

vous pouvez utiliser le BS Typeahead fork qui supporte les appels ajax. Vous pourrez alors écrire:

$('.typeahead').typeahead({
    source: function (typeahead, query) {
        return $.get('/typeahead', { query: query }, function (data) {
            return typeahead.process(data);
        });
    }
});

à partir de Bootstrap 2.1.0:

HTML:

<input type='text' class='ajax-typeahead' data-link='your-json-link' />

Javascript:

$('.ajax-typeahead').typeahead({
    source: function(query, process) {
        return $.ajax({
            url: $(this)[0].$element[0].dataset.link,
            type: 'get',
            data: {query: query},
            dataType: 'json',
            success: function(json) {
                return typeof json.options == 'undefined' ? false : process(json.options);
            }
        });
    }
});

Maintenant vous pouvez faire un code unifié, en plaçant des liens "JSON-request" dans votre code HTML.

toutes les réponses se rapportent à BootStrap 2 typeahead, qui n'est plus présent dans BootStrap 3.

pour toute autre personne dirigée ici à la recherche d'un exemple AJAX en utilisant le nouveau post-Bootstrap Twitter typeahead.js , voici un exemple pratique. La syntaxe est un peu différente:

$('#mytextquery').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  limit: 12,
  async: true,
  source: function (query, processSync, processAsync) {
    processSync(['This suggestion appears immediately', 'This one too']);
    return $.ajax({
      url: "/ajax/myfilter.php", 
      type: 'GET',
      data: {query: query},
      dataType: 'json',
      success: function (json) {
        // in this example, json is simply an array of strings
        return processAsync(json);
      }
    });
  }
});

cet exemple utilise à la fois synchrone (l'appel à processSync ) et asynchrone suggestion, donc vous avez voir certaines options apparaître immédiatement, puis d'autres sont ajoutés. Vous pouvez simplement utiliser l'un ou l'autre.

il y a beaucoup d'événements bindables et quelques options très puissantes, y compris le travail avec des objets plutôt que des chaînes, dans ce cas, vous utilisez votre propre fonction display pour rendre vos articles sous forme de texte.

j'ai augmenté le plugin original de Bootstrap de typeahead avec des capacités ajax. Très facile à utiliser:

$("#ajax-typeahead").typeahead({
     ajax: "/path/to/source"
});

voici le GitHub repo: Ajax-Typeahead

j'ai fait quelques modifications sur le jquery-ui.min.js:

//Line 319 ORIG:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").appendTo(d(...
// NEW:
this.menu=d("<ul></ul>").addClass("ui-autocomplete").addClass("typeahead").addClass("dropdown-menu").appendTo(d(...

// Line 328 ORIG:
this.element.addClass("ui-menu ui-widget ui-widget-content ui-corner-all").attr...
// NEW:this.element.attr....

// Line 329 ORIG:
this.active=a.eq(0).children("a")
this.active.children("a")
// NEW:
this.active=a.eq(0).addClass("active").children("a")
this.active.removeClass("active").children("a")`

et ajouter après css

.dropdown-menu {
    max-width: 920px;
}
.ui-menu-item {
    cursor: pointer;        
}

fonctionne parfaitement.

on peut faire des appels en utilisant Bootstrap. La version actuelle ne présente aucun problème de mise à jour des sources de la Difficulté de la mise à jour de Bootstrap est typeahead de source de données avec la réponse post , i.e. la source de bootstrap une fois mise à jour peut être à nouveau modifiée.

voir ci-dessous pour un exemple:

jQuery('#help').typeahead({
    source : function(query, process) {
        jQuery.ajax({
            url : "urltobefetched",
            type : 'GET',
            data : {
                "query" : query
            },
            dataType : 'json',
            success : function(json) {
                process(json);
            }
        });
    },
    minLength : 1,
});

à ceux qui cherchent une version coffee-script de la réponse acceptée:

$(".typeahead").typeahead source: (query, process) ->
  $.get "/typeahead",
    query: query
  , (data) ->
    process data.options

j'ai parcouru ce post et tout ne voulait pas fonctionner correctement et finalement assemblé les bits à partir de quelques réponses donc j'ai une démo de travail à 100% et je vais la coller ici pour référence - coller ceci dans un fichier php et s'assurer que les inclusions sont au bon endroit.

<?php if (isset($_GET['typeahead'])){
    die(json_encode(array('options' => array('like','spike','dike','ikelalcdass'))));
}
?>
<link href="bootstrap.css" rel="stylesheet">
<input type="text" class='typeahead'>
<script src="jquery-1.10.2.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('index.php?typeahead', { query: query }, function (data) {
            return process(JSON.parse(data).options);
        });
    }
});
</script>

j'utilise cette méthode

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
    {
    name: 'options',
    displayKey: 'value',
    source: function (query, process) {
        return $.get('/weather/searchCity/?q=%QUERY', { query: query }, function (data) {
            var matches = [];
            $.each(data, function(i, str) {
                matches.push({ value: str });
            });
            return process(matches);

        },'json');
    }
});

mise à jour: j'ai modifié mon code en utilisant this fork

aussi au lieu d'utiliser $.chaque j'ai changé de $.carte suggérée par Tomislav Markovski

$('#manufacturer').typeahead({
    source: function(typeahead, query){
        $.ajax({
            url: window.location.origin+"/bows/get_manufacturers.json",
            type: "POST",
            data: "",
            dataType: "JSON",
            async: false,
            success: function(results){
                var manufacturers = new Array;
                $.map(results.data.manufacturers, function(data, item){
                    var group;
                    group = {
                        manufacturer_id: data.Manufacturer.id,
                        manufacturer: data.Manufacturer.manufacturer
                    };
                    manufacturers.push(group);
                });
                typeahead.process(manufacturers);
            }
        });
    },
    property: 'name',
    items:11,
    onselect: function (obj) {

    }
});

Cependant je rencontre quelques problèmes par arriver

Uncaught TypeError: Ne peut pas appeler une méthode toLowerCase' undefined

comme vous pouvez le voir sur un nouveau post j'essaie de comprendre ici

j'espère que cette mise à jour vous sera utile...

essayez ceci si votre service ne renvoie pas le bon type d'en-tête application/json:

$('.typeahead').typeahead({
    source: function (query, process) {
        return $.get('/typeahead', { query: query }, function (data) {
            var json = JSON.parse(data); // string to json
            return process(json.options);
        });
    }
});

je n'ai pas un exemple pour vous ni très propre solution, mais laissez-moi vous dire ce que j'ai trouvé.

si vous regardez le code javascript pour dactylographe il ressemble à ceci:

items = $.grep(this.source, function (item) {
    if (that.matcher(item)) return item
  })

ce code utilise la méthode jQuery" grep " pour faire correspondre un élément dans le tableau source. Je n'ai vu aucun endroit où vous pourriez accrocher dans un appel AJAX, donc il n'y a pas de solution "propre" à cela.

cependant, un peu hacky façon que vous pouvez faire est de profiter de la façon dont le grep méthode fonctionne en jQuery. Le premier argument à grep est le tableau source et le second argument est une fonction qui est utilisée pour correspondre au tableau source (notez que Bootstrap appelle le "matcher" que vous avez fourni lorsque vous l'avez initialisé). Ce que vous pouvez faire est de définir la source à un dummy one-element array et de définir le matcher comme une fonction avec un appel AJAX dedans. De cette façon, il lancera L'appel AJAX juste une fois (puisque votre tableau source n'a qu'un seul élément).

cette solution n'est pas seulement hacky, mais elle souffrira de problèmes de performance puisque le code de tête de machine est conçu pour faire une recherche sur chaque touche de presse (les appels AJAX ne devraient vraiment se produire que sur quelques touches ou après une certaine période de temps inactif). Mon conseil est de l'essayer, mais s'en tenir à une bibliothèque autocomplete différente ou ne l'utiliser pour des situations non-AJAX si vous rencontrez des problèmes.

lorsque vous utilisez ajax, essayez $.getJSON() au lieu de $.get() si vous avez des problèmes avec l'affichage correct des résultats.

Dans mon cas, j'ai eu seulement le premier caractère de chaque résultat lorsque j'ai utilisé $.get() , bien que j'ai utilisé json_encode() côté serveur.

j'utilise $().one() pour résoudre ce; Lorsque la page est chargée, j'envoie ajax au serveur et j'attends d'avoir fini. Puis passer résultat à la fonction. $().one() est important .Parce que la force frappe tête.js à joindre à l'entrée une seule fois. désolé pour la mauvaise écriture.

(($) => {
    
    var substringMatcher = function(strs) {
        return function findMatches(q, cb) {
          var matches, substringRegex;
          // an array that will be populated with substring matches
          matches = [];
      
          // regex used to determine if a string contains the substring `q`
          substrRegex = new RegExp(q, 'i');
      
          // iterate through the pool of strings and for any string that
          // contains the substring `q`, add it to the `matches` array
          $.each(strs, function(i, str) {
            if (substrRegex.test(str)) {
              matches.push(str);
            }
          });
          cb(matches);
        };
      };
      
      var states = [];
      $.ajax({
          url: 'https://baconipsum.com/api/?type=meat-and-filler',
          type: 'get'
      }).done(function(data) {
        $('.typeahead').one().typeahead({
            hint: true,
            highlight: true,
            minLength: 1
          },
          {
            name: 'states',
            source: substringMatcher(data)
          });
      })
      

})(jQuery);

.tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
    cursor: pointer;
}

.tt-suggestion:hover {
    color: #f0f0f0;
    background-color: #0097cf;
}

.tt-suggestion p {
    margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

<input class="typeahead" type="text" placeholder="where ?">

 $('#runnerquery').typeahead({
        source: function (query, result) {
            $.ajax({
                url: "db.php",
                data: 'query=' + query,            
                dataType: "json",
                type: "POST",
                success: function (data) {
                    result($.map(data, function (item) {
                        return item;
                    }));
                }
            });
        },
        updater: function (item) {
        //selectedState = map[item].stateCode;

       // Here u can obtain the selected suggestion from the list


        alert(item);
            }

    }); 

 //Db.php file
<?php       
$keyword = strval($_POST['query']);
$search_param = "{$keyword}%";
$conn =new mysqli('localhost', 'root', '' , 'TableName');

$sql = $conn->prepare("SELECT * FROM TableName WHERE name LIKE ?");
$sql->bind_param("s",$search_param);            
$sql->execute();
$result = $sql->get_result();
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
    $Resut[] = $row["name"];
    }
    echo json_encode($Result);
}
$conn->close();

?>