Twitter bootstrap typeahead ajax esempio

Sto cercando di trovare un esempio funzionante di dell'elemento typeahead twitter bootstrap che farà una chiamata Ajax per popolare il suo menu a discesa.

Ho un esempio di completamento automatico jquery funzionante che definisce l'URL Ajax e come elaborare la risposta

<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];
                }
            );
       ..

Cosa devo modificare per convertirlo nell'esempio 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];
                }
            );
       ..

Aspetterò che il problema " Aggiungi supporto fonti remote per typeahead " sia risolto.

Modifica: typeahead non è più raggruppato in Bootstrap 3. Dai un'occhiata:

• Dov'è il modulo JavaScript typeahead in Bootstrap 3 RC 1?
• typeahead.js

A partire da Bootstrap 2.1.0 fino alla 2.3.2, puoi farlo:

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

Per utilizzare i dati JSON in questo modo:

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

Nota che i dati JSON devono essere del giusto tipo mime (application / json), quindi jQuery lo riconosce come JSON.

È possibile utilizzare il fork BS Typeahead che supporta le chiamate Ajax . Quindi sarai in grado di scrivere:

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

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

Ora puoi creare un codice unificato, inserendo link "json-request" nel tuo codice HTML.

Tutte le risposte si riferiscono al typeahead BootStrap 2, che non è più presente in BootStrap 3.

Per chiunque sia diretto qui alla ricerca di un esempio AJAX usando il nuovo Twitter post-Bootstrap typeahead.js , ecco un esempio funzionante. La sintassi è leggermente diversa:

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

In questo esempio vengono utilizzati sia i suggerimenti sincroni (la chiamata a processSync ) che i suggerimenti asincroni, quindi vedrai apparire immediatamente alcune opzioni, quindi ne verranno aggiunte altre. Puoi semplicemente usare l'uno o l'altro.

Ci sono molti eventi associabili e alcune opzioni molto potenti, incluso lavorare con oggetti piuttosto che stringhe, nel qual caso useresti la tua funzione di visualizzazione personalizzata per rendere i tuoi oggetti come testo.

Ho aumentato il plug-in Bootstrap originale typeahead con funzionalità ajax. Molto facile da usare:

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

Ecco il repository github: Ajax-Typeahead

Ho apportato alcune modifiche al 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")`

e aggiungi i seguenti css

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

Funziona perfettamente

Sto usando questo metodo

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

È possibile effettuare chiamate utilizzando Bootstrap. La versione corrente non presenta alcun problema di aggiornamento dell'origine Problemi di aggiornamento dell'origine dati typeahead di Bootstrap con risposta post , ovvero la fonte di bootstrap una volta aggiornata può essere nuovamente modificata.

Fare riferimento di seguito per un esempio:

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

A coloro che cercano una versione per caffè della risposta accettata:

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

Ho esaminato questo post e tutto non voleva funzionare correttamente e alla fine ho messo insieme i bit da alcune risposte, quindi ho una demo funzionante al 100% e lo incollerò qui come riferimento: incollalo in un file php e assicurati che le inclusioni siano in il posto giusto.

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

Prova questo se il tuo servizio non sta restituendo la giusta intestazione del tipo di contenuto 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);
        });
    }
});

AGGIORNAMENTO: ho modificato il mio codice usando questo fork

anche invece di usare $ .each sono passato a $ .map come suggerito da 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) {

    }
});

Tuttavia, sto riscontrando alcuni problemi

Uncaught TypeError: impossibile chiamare il metodo 'toLowerCase' di undefined

come puoi vedere in un post più recente, sto cercando di capire qui

spero che questo aggiornamento ti sia di aiuto ...

Non ho un esempio funzionante per te né ho una soluzione molto pulita, ma lascia che ti dica cosa ho trovato.

Se guardi il codice javascript per TypeAhead è simile al seguente:

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

Questo codice utilizza il metodo "grep" jQuery per abbinare un elemento nella matrice di origine. Non ho visto nessun posto in cui potresti agganciare una chiamata AJAX, quindi non esiste una soluzione "pulita" a questo.

Tuttavia, un modo un po 'confuso che puoi fare è sfruttare il modo in cui il metodo grep funziona in jQuery. Il primo argomento di grep è l'array di origine e il secondo argomento è una funzione che viene utilizzata per abbinare l'array di origine (nota che Bootstrap chiama il "matcher" che hai fornito quando lo hai inizializzato). Quello che potresti fare è impostare l'origine su un array di un elemento fittizio e definire il matcher come una funzione con una chiamata AJAX al suo interno. In questo modo, eseguirà la chiamata AJAX solo una volta (poiché l'array di origine contiene solo un elemento).

Questa soluzione non è solo confusa, ma soffrirà di problemi di prestazioni in quanto il codice TypeAhead è progettato per effettuare una ricerca su ogni pressione dei tasti (le chiamate AJAX dovrebbero realmente avvenire solo ogni pochi tasti o dopo un certo periodo di inattività). Il mio consiglio è di provarlo, ma attenersi a una libreria di completamento automatico diversa o utilizzarla solo per situazioni non AJAX in caso di problemi.

quando si utilizza ajax, provare $.getJSON()invece a $.get()riscontrare problemi con la corretta visualizzazione dei risultati.

Nel mio caso ho ottenuto solo il primo carattere di ogni risultato quando l'ho usato $.get(), anche se ho usato il json_encode()lato server.

io uso $().one() per risolvere questo; Quando la pagina viene caricata, invio ajax al server e aspetto di farlo. Quindi passare il risultato alla funzione. $().one()è importante. Perché forzare typehead.js a collegarsi all'input una volta. scusa per la cattiva scrittura.

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

?>