Twitter bootstrap 3.0 typeahead ajax exemple
Il ya beaucoup d'exemples de type Ajax tête ajax là-bas pour bootstrap 2, par exemple ce ici Twitter bootstrap tête ajax exemple .
cependant j'utilise bootstrap 3 et je n'ai pas pu trouver un exemple complet, à la place il y a juste un tas d'extraits d'information incomplets avec des liens vers d'autres sites web, par exemple ceci ici Où est le module JavaScript tête de machine dans Bootstrap 3 RC 1?
Quelqu'un pourrait-il s'il vous plaît poster un exemple entièrement fonctionnel sur la façon d'utiliser typeahead avec bootstrap 3, Si vous chargez les données à partir du serveur via ajax, chaque fois que l'utilisateur change l'entrée.
5 réponses
avec bootstrap3-typeahead, Je l'ai fait travailler avec le code suivant:
<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
jQuery(document).ready(function() {
$('#typeahead-input').typeahead({
source: function (query, process) {
return $.get('search?q=' + query, function (data) {
return process(data.search_results);
});
}
});
})
</script>
le backend fournit un service de recherche sous le search
GET endpoint, recevant la requête dans le paramètre q
, et renvoie un JSON dans le format { 'search_results': ['resultA', 'resultB', ... ] }
. Les éléments du tableau search_results
sont affichés dans l'entrée typeahead.
Voici mon expérience step by step, inspirée par typeahead examples , à partir d'une application Scala/Playfram Framework sur laquelle nous travaillons.
Dans un script LearnerNameTypeAhead.coffee
( convertible de cours à la JS ) j'ai:
$ ->
learners = new Bloodhound(
datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value")
queryTokenizer: Bloodhound.tokenizers.whitespace
remote: "/learner/namelike?nameLikeStr=%QUERY"
)
learners.initialize()
$("#firstName").typeahead
minLength: 3
hint: true
highlight:true
,
name: "learners"
displayKey: "value"
source: learners.ttAdapter()
j'ai inclus le paquet de caractères typographiques et mon script sur la page, et il y a un div
autour de mon champ d'entrée comme suit:
<script src=@routes.Assets.at("javascripts/typeahead.bundle.js")></script>
<script src=@routes.Assets.at("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
<input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>
le le résultat est que pour chaque caractère saisi dans le champ d'ENTRÉE après les premiers caractères minLength (3), la page émet une requête GET avec une URL ressemblant à /learner/namelike?nameLikeStr=
plus les caractères actuellement saisis. Le code du serveur renvoie un tableau json d'objets contenant les champs "id" et" value", par exemple comme ceci:
[ {
"id": "109",
"value": "Graham Jones"
},
{
"id": "5833",
"value": "Hezekiah Jones"
} ]
Pour jouer, j'ai besoin de quelque chose dans le fichier de routes:
GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)
et enfin, j'ai mis un peu de style pour le liste déroulante, etc. dans une nouvelle typeahead.fichier css que j'ai inclus dans la page <head>
(ou accessible .css)
.tt-dropdown-menu {
width: 252px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.typeahead {
background-color: #fff;
}
.typeahead:focus {
border: 2px solid #0097cf;
}
.tt-query {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
j'utilise ceci https://github.com/biggora/bootstrap-ajax-typeahead
le résultat du code utilisant Codeigniter / PHP
<pre>
$("#produto").typeahead({
onSelect: function(item) {
console.log(item);
getProductInfs(item);
},
ajax: {
url: path + 'produto/getProdName/',
timeout: 500,
displayField: "concat",
valueField: "idproduto",
triggerLength: 1,
method: "post",
dataType: "JSON",
preDispatch: function (query) {
showLoadingMask(true);
return {
search: query
}
},
preProcess: function (data) {
if (data.success === false) {
return false;
}else{
return data;
}
}
}
});
</pre>
ici vous pouvez trouver des informations sur la façon de mettre à jour en v3: http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/
voici quelques exemples aussi: http://twitter.github.io/typeahead.js/examples/
<input id="typeahead-input" type="text" data-provide="typeahead" />
<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
"Akash", "Robin", "Roshan", "Aryan"];
$(function() {
$('#typeahead-input').typeahead({
source: function (query, process) {
process(data);
});
}
});
});
</script>