twitter bootstrap 3.0 typeahead ajax exemple

Il y a beaucoup de typeahead ajax exemples de bootstrap 2, par exemple ici twitter bootstrap typeahead ajax exemple.

Cependant, je suis en utilisant bootstrap 3 et je ne pouvais pas trouver un exemple complet, à la place il y a tout un tas d'information incomplète les extraits avec des liens vers d'autres sites, par exemple ici Où est le typeahead JavaScript module dans le Bootstrap 3 RC 1?

Quelqu'un pourrait s'il vous plaît poster un travail entièrement exemple sur la façon d'utiliser typeahead avec bootstrap 3, si vous charger les données depuis le serveur via ajax, chaque fois que l'utilisateur modifie l'entrée.

Cet exemple fonctionne pour Bootstrap 3 bootply.com/86571
Je cherchais un exemple qui est l'obtention de données à distance via Ajax.

InformationsquelleAutor Pascal Klein | 2014-04-10

40

Avec bootstrap3-typeahead, je l'ai fait pour fonctionner 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 offre de service de recherche en vertu de la search OBTENIR le point de terminaison de la réception de la requête dans le q paramètre et renvoie un JSON dans le format { 'search_results': ['resultA', 'resultB', ... ] }. Les éléments de la search_resultstableau sont affichés dans la typeahead d'entrée.
- github.com/bassjobsen/Bootstrap-3-Typeahead est le moyen le plus rapide de mise à niveau pour moi aussi
- fonctionne tout simplement génial, merci
- super. N'aurions pas pu trouver un exemple complet dans les docs. Cette réponse aide beaucoup
- Trouvé un bon exemple ici aussi: tatiyants.com/...
- Bon travail, mais, malheureusement suggestion de liste déroulante.
InformationsquelleAutor Michael
4

Voici mon étape par étape de l'expérience, inspiré par typeahead exemples, à partir d'un Scala/PlayFramework application de notre travail.

Dans un script LearnerNameTypeAhead.coffee (convertibles de cours de 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 la typeahead bundle et mon script sur la page, et il y a un div autour de mon champ de saisie 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 résultat est que, pour chaque caractère tapé dans le champ de saisie après la première minLength (3) caractères, la page émet une requête GET à l'URL de la recherche comme /learner/namelike?nameLikeStr= en plus de la actuellement des caractères tapés. Le code du serveur retourne un tableau json d'objets contenant des champs "id" et "valeur", 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 certains du style de la liste déroulante, etc. dans une nouvelle typeahead.fichier css qui j'ai inclus dans la page de <head> (ou accessibles .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;
}
```
- où avez-vous obtenu les styles à partir de? Avec eux, il est terrible dans ma BS-3 projet. Avec les styles, il ressemble beaucoup.
- Je crois que j'ai de l'inspection de la page Twitter Typeahead Exemples. J'ai peut-être eu à ajuster légèrement pour s'adapter à mon projet de styles.
- Qu'est-ce que ce Chien de saint-hubert Classe? Et pourriez vous s'il vous plaît reather post javascript puis coffeescript. Je sais que je pourrais convertir, mais je pense que tout le monde wo pouvez lire le café, peuvent lire la plaine de javascript, mais pas l'inverse.
- Chien de saint-hubert est la suggestion du moteur, le code qui détermine les options de ramener basé sur ce qui a été tapé si loin. Plus de docs à la TypeAhead page. Dans leurs mots, il y a deux parties pour le type d'avance: l'INTERFACE utilisateur (vue de Typeahead) et la suggestion du moteur (dans ce cas, Chien de saint-hubert).
- Merci pour votre exemple. "en s'assurant que le div id, pas l'id d'entrée, est celle visée dans le script" -> vous êtes fait référence aux $("#getLearnerLike .typeahead"), qui est le champ de saisie à l'intérieur de cette div.
- Merci @Chris, a noté et mis à jour!
InformationsquelleAutor wwkudu

Je suis en utilisant ce
https://github.com/biggora/bootstrap-ajax-typeahead

Le résultat de code à l'aide de 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>

C'est pour Twitter Bootstrap 2.0+

InformationsquelleAutor Luiz Fernando Fonseca

1

Ici vous pouvez trouver des infos sur comment mettre à jour en v3: http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/

Voici quelques exemples: http://twitter.github.io/typeahead.js/examples/
- Qu'entendez-vous la mise à niveau? Pouvez-vous plutôt s'il vous plaît entrer un exemple ici.
- Je voulais dire si vous avez un travail typeahead pour bootstrap2, vous pouvez mettre à niveau à l'aide de cette info. Le deuxième lien peut être plus utile pour vous?
- Que le lien est mort, merci de mettre du contenu dans la réponse, plutôt que d'un lien externe.
InformationsquelleAutor netcult

-1

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

Cette réponse pourrait être améliorée si elle n'était pas à 100% de code.

InformationsquelleAutor Aamir Parre

Vous devez vous connecter pour publier un commentaire.