wake-up-neo.net

twitter bootstrap typeahead ajax beispiel

Ich versuche, ein funktionierendes Beispiel für das Twitter-Bootstrap-Element typeahead zu finden, das einen Ajax-Aufruf ausführt, um das Dropdown-Fenster zu füllen. 

Ich habe ein Beispiel für ein funktionierendes Autokomplettierungs-Jquery, das die ajax-URL definiert und wie die Antwort verarbeitet wird

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

Was muss ich ändern, um dieses Beispiel in typeahead zu konvertieren? 

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

Ich werde warten, bis die ' Add Remote Source-Unterstützung für Typeahead ' gelöst wurde.

270
emeraldjava

Bearbeiten: Typeahead wird nicht mehr in Bootstrap 3 gebündelt.

Ab Bootstrap 2.1.0 bis 2.3.2 können Sie Folgendes tun:

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

So konsumieren Sie JSON-Daten:

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

Beachten Sie, dass die JSON-Daten vom richtigen MIME-Typ (application/json) sein müssen, damit sie von jQuery als JSON erkannt werden.

294
Stijn Van Bael

Sie können den BS Typeahead-Gabel verwenden, der ajax-Aufrufe unterstützt.

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

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

Jetzt können Sie einen einheitlichen Code erstellen, indem Sie "Json-Request" -Links in Ihren HTML-Code einfügen.

69
Thantifaxath

Alle Antworten beziehen sich auf BootStrap 2-Typkopf, der in BootStrap 3 nicht mehr vorhanden ist.

Für alle anderen, die hierher gerufen werden und nach einem AJAX Beispiel suchen, das den neuen Post-Bootstrap Twitter typeahead.js verwendet, ist hier ein Funktionsbeispiel. Die Syntax ist etwas anders:

$('#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 diesem Beispiel werden sowohl synchrone (Aufruf von processSync) als auch asynchrone Vorschläge verwendet. Einige Optionen werden sofort angezeigt. Dann werden andere Optionen hinzugefügt. Sie können einfach das eine oder das andere verwenden.

Es gibt viele bindbare Ereignisse und einige sehr leistungsfähige Optionen, z. B. das Arbeiten mit Objekten anstelle von Zeichenfolgen. In diesem Fall würden Sie Ihre eigene benutzerdefinierte Funktion display verwenden, um Ihre Elemente als Text darzustellen.

43

Ich habe das ursprüngliche Bootstrap-Plugin von typeahead mit den Ajax-Funktionen erweitert. Sehr einfach zu bedienen:

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

Hier ist das Github-Repo: Ajax-Typeahead

24
Paul Warelis

Ich habe einige Änderungen an jquery-ui.min.js vorgenommen:

//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")`

und fügen Sie folgende CSS hinzu

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

Funktioniert perfekt.

5
bmoers

Ich verwende diese Methode

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

Für diejenigen, die eine Kaffeeskriptversion der akzeptierten Antwort suchen:

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

Ich habe diesen Post durchgearbeitet und alles wollte nicht richtig funktionieren und schließlich haben die Bits aus ein paar Antworten zusammengesetzt. Ich habe also eine 100% funktionierende Demo und werde sie hier als Referenz einfügen - fügen Sie sie in eine PHP-Datei ein und vergewissern Sie sich, dass sie enthalten sind der richtige Ort.

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

Man kann mit Bootstrap telefonieren. Die aktuelle Version enthält keine Probleme mit dem Quellupdate Probleme beim Aktualisieren der Typeahead-Datenquelle von Bootstrap mit Nachantwort , D.

Bitte sehen Sie unten für ein Beispiel:

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

UPDATE: Ich habe meinen Code mit this fork geändert 

anstatt $ .each zu verwenden, wechselte ich zu $ ​​.map, wie von Tomislav Markovski vorgeschlagen

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

    }
});

Allerdings stoße ich auf Probleme

Uncught TypeError: Die Methode 'toLowerCase' von undefined kann nicht aufgerufen werden

wie Sie in einem neueren Beitrag sehen können, versuche ich herauszufinden hier

ich hoffe, dieses Update hilft Ihnen weiter ...

1
mmoscosa

Probieren Sie dies aus, wenn Ihr Dienst nicht den richtigen Header des Application/Json-Inhaltstyps zurückgibt:

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

wenn Sie ajax verwenden, versuchen Sie $.getJSON() anstelle von $.get(), wenn Sie Probleme mit der korrekten Anzeige der Ergebnisse haben.

In meinem Fall habe ich nur den ersten Buchstaben jedes Ergebniss erhalten, als ich $.get() verwendete, obwohl ich json_encode() serverseitig verwendete.

0
larsbo

ich benutze $().one() um das zu lösen; Wenn die Seite geladen ist, sende ich Ajax an den Server und warte, bis alles erledigt ist. Dann übergeben Sie das Ergebnis an die Funktion .$().one() ist wichtig. Weil force typehead.js einmal an die Eingabe angehängt werden muss. Entschuldigung für das schlechte Schreiben.

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

Ich habe kein Arbeitsbeispiel für Sie und ich habe keine sehr saubere Lösung, aber lassen Sie mich Ihnen sagen, was ich gefunden habe.

Wenn Sie sich den Javascript-Code für TypeAhead ansehen, sieht das so aus:

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

Dieser Code verwendet die jQuery-Methode "grep", um ein Element im Quellarray abzugleichen. Ich habe keine Orte gefunden, an denen Sie einen AJAX - Anruf anhängen könnten, daher gibt es keine "saubere" Lösung.

Eine etwas häßliche Möglichkeit, dies zu erreichen, besteht jedoch darin, die Funktionsweise der grep-Methode in jQuery zu nutzen. Das erste Argument für grep ist das Quellarray und das zweite Argument ist eine Funktion, die zum Anpassen des Quellarrays verwendet wird (Hinweis Bootstrap ruft den "Matcher" auf, den Sie bei der Initialisierung angegeben haben). Sie könnten die Quelle auf ein Dummy-Einelement-Array setzen und den Matcher als Funktion definieren, in der ein Aufruf von AJAX enthalten ist. Auf diese Weise wird der Aufruf AJAX nur einmal ausgeführt (da Ihr Quellarray nur ein Element enthält).

Diese Lösung ist nicht nur gehackt, sondern leidet auch unter Leistungsproblemen, da der TypeAhead-Code bei jedem Tastendruck nachschlagen soll (AJAX-Aufrufe sollten eigentlich nur bei jedem Tastendruck oder nach einer gewissen Leerlaufzeit auftreten). Mein Rat ist, es zu versuchen, aber bleiben Sie entweder bei einer anderen Autocomplete-Bibliothek oder verwenden Sie diese nur für Nicht-AJAX-Situationen, wenn Sie auf Probleme stoßen.

0
Aamer Abbas