Verwenden Sie typeahead.js zum Auffüllen der Liste mit XML-Datei

Question

Ich weiß eigentlich nicht, wo ich anfangen soll, da die Dokumentation nicht wirklich viel zu erklären.

Ich möchte eine Autocomplete-Liste mit einer externen XML-Datei generieren, die ich auf meiner Website laden.

Bisher habe ich habe diese in das Eingabefeld angelegt:

$('.typeahead').typeahead({ 
    highlight: true 
}, 
{ 
    name: 'brands', 
    display: 'value', 
    source: function(query, syncResults, asyncResults) { 
     $.get('/?s=' + query, function(data) { 
      asyncResults(data); 
     }); 
    } 
}); 

Nach der Suche, ich sehe zusätzliche GET-Anforderungen für jeden Buchstaben der Suchabfrage angezeigt. Aber dann in der Konsole sehe ich die folgende Fehlermeldung:

Uncaught TypeError: Cannot use 'in' operator to search for 'length' in <!DOC - jquery.js?ver=1.12.4:2 Uncaught TypeError: Cannot use 'in' operator to search for 'length' in <!DOC 

nicht sicher, was das bedeutet: S

I http://services.inveroak.co.uk/readerimages/livepanel/91112.xml als Quelle XML-Datei festlegen möchten aus zu lesen, und dann verschiedene Werte anzeigen von die XML als Einträge werden eingegeben. Ich möchte dann einen Sprung zu einer URL durchführen, wenn diese Einträge angeklickt werden.

Nutze ich das richtige Werkzeug für den Job?

Answer 1

können Sie verwenden $.get(), $.map(), input Ereignis, modifizierte Version von typeahead.jssubstringMatcher Funktion

$(function() { 
    var source; // source `.xml` 
    var substringMatcher = function(strs, q, cb) { 
    return (function(q, cb, name) { 
     var matches, substrRegex; 

     // 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(name(str)); 
     } 
     }); 

     cb(matches); 
    }(q, cb, function(res) { 
     return res 
    })); 
    }; 
    $.get("data.xml") // get `xml` source 
    .then(function(xml) { 
     // define `source` as array containing `.textContent` 
     // of `Name` elements 
     source = $.map($(xml).find("Name"), function(node) { 
     return node.textContent 
     }); 
     return source 
    }) 
    .then(function(src) { 
     // `source` is defined, use `input` event to 
     // pass current `input` value to `substringMatcher` function 
     $(".typeahead").on("input", function(e) { 
     substringMatcher(src, e.target.value, function(results) { 
      // display results 
      $("#results ul").empty(); 
      $.map(results, function(value, index) { 
      $("#results ul") 
       .append($("<li />", { 
       "class": "results-" + index, 
       "html": value 
       })) 
      }) 
     }) 
     }); 
    }) 
}); 

plnkr http://plnkr.co/edit/VsHft9g74XczO1yrSJW7?p=preview