jquery - bootstrap - bloodhound typeahead

Twitter bootstrap typeahead ajax ejemplo

Question

Estoy tratando de encontrar un ejemplo funcional del elemento de tipeahead de bootstrap de twitter que haga una llamada ajax para completar su menú desplegable

Tengo un ejemplo de autocompletado de jquery en funcionamiento que define la url de ajax y cómo procesar la respuesta.

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete(''./index/runnerfilter/format/html'',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

¿Qué necesito cambiar para convertir esto al ejemplo de typeahead?

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:''/index/runnerfilter/format/html'', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

Voy a esperar a que se resuelva el problema '' Agregar soporte de fuentes remotas para typeahead ''.

Answer 1

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

Ahora puede hacer un código unificado, colocando enlaces "json-request" en su código HTML.

Answer 2

ACTUALIZACIÓN: modifiqué mi código usando este fork

También, en lugar de usar $ .each, cambié a $ .map según lo sugerido por 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) {

    }
});

Sin embargo estoy encontrando algunos problemas por conseguir

No se detectó TypeError: no se puede llamar al método ''toLowerCase'' de undefined

Como se puede ver en una publicación más reciente, estoy tratando de averiguar here

Espero que esta actualización te sea de alguna ayuda ...

Answer 3

Edición: typeahead ya no se incluye en Bootstrap 3. Echa un vistazo a:

• ¿Dónde está el módulo de JavaScript typeahead en Bootstrap 3 RC 1?
• typeahead.js

Desde Bootstrap 2.1.0 hasta 2.3.2, puede hacer esto:

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

Para consumir datos JSON como este:

{
    "options": [
        "Option 1",
        "Option 2",
        "Option 3",
        "Option 4",
        "Option 5"
    ]
}

Tenga en cuenta que los datos JSON deben ser del tipo mime correcto (application / json) para que jQuery los reconozca como JSON.

Answer 4

Estoy usando este metodo

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

Answer 5

He aumentado el plugin original Bootstrap de typeahead con capacidades ajax. Muy fácil de usar:

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

Aquí está el repositorio de github: Ajax-Typeahead

Answer 6

Hice algunas modificaciones en el 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")`

y agrega el siguiente css

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

Funciona perfecto.

Answer 7

Intente esto si su servicio no devuelve el encabezado de tipo de contenido de aplicación / json correcto:

$(''.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);
        });
    }
});

Answer 8

No tengo un ejemplo práctico para ti ni tengo una solución muy limpia, pero déjame decirte lo que he encontrado.

Si nos fijamos en el código javascript para TypeAhead, se ve así:

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

Este código utiliza el método "grep" de jQuery para hacer coincidir un elemento en la matriz de origen. No vi ningún lugar en el que pudieras conectar una llamada AJAX, así que no hay una solución "limpia" para esto.

Sin embargo, una forma un tanto intrépida de hacer esto es aprovechar la forma en que funciona el método grep en jQuery. El primer argumento de grep es la matriz de origen y el segundo argumento es una función que se usa para coincidir con la matriz de origen (el aviso Bootstrap llama al "comparador" que proporcionó cuando lo inicializó). Lo que podría hacer es establecer el origen en una matriz de un elemento ficticio y definir el emparejador como una función con una llamada AJAX en él. De esa manera, ejecutará la llamada AJAX solo una vez (ya que la matriz de origen solo tiene un elemento).

Esta solución no solo es intrincada, sino que también tendrá problemas de rendimiento, ya que el código TypeAhead está diseñado para realizar una búsqueda en cada pulsación de tecla (las llamadas AJAX solo deberían suceder cada pocas pulsaciones o después de una cierta cantidad de tiempo inactivo). Mi consejo es que lo intente, pero siga con una biblioteca de autocompletar diferente o solo use esto para situaciones que no sean AJAX si tiene algún problema.

Answer 9

Para aquellos que buscan una versión en coffeescript de la respuesta aceptada:

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

Answer 10

Puede utilizar la bifurcación BS Typeahead que admite llamadas ajax. Entonces podrás escribir:

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

Answer 11

Revisé este post y todo no quería funcionar correctamente y, finalmente, junté los bits de unas pocas respuestas, así que tengo una demostración del 100% que funciona y la pegaré aquí como referencia. Pega esto en un archivo php y asegúrate de que las inclusiones están en el lugar correcto.

$(''.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'');
    }
});

Answer 12

Todas las respuestas se refieren a la tipografía de BootStrap 2, que ya no está presente en BootStrap 3.

Para cualquier otra persona dirigida aquí que busque un ejemplo de AJAX utilizando el nuevo typeahead.js post-Bootstrap, aquí hay un ejemplo typeahead.js . La sintaxis es un poco diferente:

$(''#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);
      }
    });
  }
});

Este ejemplo utiliza tanto la sincronización (la llamada a processSync ) como la sugerencia asíncrona, por lo que vería que algunas opciones aparecen inmediatamente y luego se agregan otras. Puedes usar uno u otro.

Hay muchos eventos vinculables y algunas opciones muy poderosas, que incluyen trabajar con objetos en lugar de cadenas, en cuyo caso usarías tu propia función de visualización personalizada para representar tus elementos como texto.

Answer 13

Uno puede hacer llamadas utilizando Bootstrap. La versión actual no tiene ningún problema de actualización de origen. Problema al actualizar la fuente de datos de cabecera de tipo de Bootstrap con respuesta posterior , es decir, la fuente de bootstrap una vez actualizada se puede modificar de nuevo.

Por favor refiérase a continuación para un ejemplo:

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

Answer 14

Yo uso $().one() para resolver esto; Cuando la página está cargada, envío un ajax al servidor y espero a que termine. Luego pasa el resultado para funcionar. $().one() es importante. Porque obliga a typehead.js a adjuntar una entrada una vez. lo siento por la mala escritura

(($) => {
    
    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 ?">

Answer 15

cuando use ajax, intente $.getJSON() lugar de $.get() si tiene problemas con la visualización correcta de los resultados.

En mi caso, solo obtuve el primer carácter de cada resultado cuando usé $.get() , aunque utilicé json_encode() del lado del servidor.

Answer 16

 $(''#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();

?>