autocomplete - remote - ejemplo de arranque de twitter 3 de arranque de twitter
typeahead remote (5)
Aquí está mi experiencia paso a paso, inspirada en ejemplos fáciles de usar , de una aplicación Scala / PlayFramework en la que estamos trabajando.
En un script LearnerNameTypeAhead.coffee ( convertible por supuesto a JS ) tengo:
$ ->
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()
Incluí el paquete typeahead y mi script en la página, y hay un div en mi campo de entrada de la siguiente manera:
<script [email protected]("javascripts/typeahead.bundle.js")></script>
<script [email protected]("javascripts/LearnerNameTypeAhead.js") type="text/javascript" ></script>
<div>
<input name="firstName" id="firstName" class="typeahead" placeholder="First Name" value="@firstName">
</div>
El resultado es que para cada carácter escrito en el campo de entrada después de los primeros caracteres minLength (3), la página emite una solicitud GET con una URL que se parece a /learner/namelike?nameLikeStr= más los caracteres actualmente escritos. El código del servidor devuelve una matriz json de objetos que contienen los campos "id" y "value", por ejemplo, así:
[ {
"id": "109",
"value": "Graham Jones"
},
{
"id": "5833",
"value": "Hezekiah Jones"
} ]
Para jugar, necesito algo en el archivo de rutas:
GET /learner/namelike controllers.Learners.namesLike(nameLikeStr:String)
Y finalmente, configuré parte del estilo para el menú desplegable, etc. en un nuevo archivo typeahead.css que incluí en el <head> la página (o .css accesible)
.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;
}
Hay muchos ejemplos de ajax de tipeo por ahí para bootstrap 2, por ejemplo este ejemplo de bootstrap de twitter escribe un ejemplo de ajax .
Sin embargo, estoy usando bootstrap 3 y no pude encontrar un ejemplo completo, en su lugar solo hay un montón de fragmentos de información incompletos con enlaces a otros sitios web, por ejemplo aquí ¿Dónde está el módulo de escritura anticipada de JavaScript en Bootstrap 3 RC 1?
¿Podría alguien publicar un ejemplo que funcione completamente sobre cómo usar typeahead con bootstrap 3, si carga los datos del servidor a través de ajax, cada vez que el usuario cambie la entrada?
Aquí puede encontrar información sobre cómo actualizar a v3: http://tosbourn.com/2013/08/javascript/upgrading-from-bootstraps-typeahead-to-typeahead-js/
Aquí hay algunos ejemplos también: http://twitter.github.io/typeahead.js/examples/
Con bootstrap3-typeahead, lo hice funcionar con el siguiente código:
<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>
El backend proporciona el servicio de búsqueda en el punto final GET de search , recibe la consulta en el parámetro q y devuelve un JSON en el formato { ''search_results'': [''resultA'', ''resultB'', ... ] } . Los elementos de la matriz search_results se muestran en la entrada typeahead.
Estoy usando esto https://github.com/biggora/bootstrap-ajax-typeahead
El resultado del código usando 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>
<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>