So klonen Sie ein JavaScript-Autocomplete-Eingabefeld

Question

Ich stieß auf ein Autocomplete-Flughafen-Suchskript. Es befindet sich hier:

https://codepen.io/jessegavin/pen/ALpOvr

Das Eingabefeld ist:

<div class="form-group"> 
    <label class="control-label">Enter an Airport</label> 
    <input id="autocomplete" type="text" /> 
</div> 

Der eigentliche JavaScript-Code ist:

var options = { 
    shouldSort: true, 
    threshold: 0.4, 
    maxPatternLength: 32, 
    keys: [{ 
    name: 'iata', 
    weight: 0.5 
    }, { 
    name: 'name', 
    weight: 0.3 
    }, { 
    name: 'city', 
    weight: 0.2 
    }] 
}; 

var fuse = new Fuse(airports, options) 


var ac = $('#autocomplete') 
    .on('click', function(e) { 
    e.stopPropagation(); 
    }) 
    .on('focus keyup', search) 
    .on('keydown', onKeyDown); 

var wrap = $('<div>') 
    .addClass('autocomplete-wrapper') 
    .insertBefore(ac) 
    .append(ac); 

var list = $('<div>') 
    .addClass('autocomplete-results') 
    .on('click', '.autocomplete-result', function(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    selectIndex($(this).data('index')); 
    }) 
    .appendTo(wrap); 

$(document) 
    .on('mouseover', '.autocomplete-result', function(e) { 
    var index = parseInt($(this).data('index'), 10); 
    if (!isNaN(index)) { 
     list.attr('data-highlight', index); 
    } 
    }) 
    .on('click', clearResults); 

function clearResults() { 
    results = []; 
    numResults = 0; 
    list.empty(); 
} 

function selectIndex(index) { 
    if (results.length >= index + 1) { 
    ac.val(results[index].iata); 
    clearResults(); 
    } 
} 

var results = []; 
var numResults = 0; 
var selectedIndex = -1; 

function search(e) { 
    if (e.which === 38 || e.which === 13 || e.which === 40) { 
    return; 
    } 

    if (ac.val().length > 0) { 
    results = _.take(fuse.search(ac.val()), 7); 
    numResults = results.length; 

    var divs = results.map(function(r, i) { 
     return '<div class="autocomplete-result" data-index="'+ i +'">' 
      + '<div><b>'+ r.iata +'</b> - '+ r.name +'</div>' 
      + '<div class="autocomplete-location">'+ r.city +', '+ r.country +'</div>' 
      + '</div>'; 
    }); 

    selectedIndex = -1; 
    list.html(divs.join('')) 
     .attr('data-highlight', selectedIndex); 

    } else { 
    numResults = 0; 
    list.empty(); 
    } 
} 

function onKeyDown(e) { 
    switch(e.which) { 
    case 38: // up 
     selectedIndex--; 
     if (selectedIndex <= -1) { 
     selectedIndex = -1; 
     } 
     list.attr('data-highlight', selectedIndex); 
     break; 
    case 13: // enter 
     selectIndex(selectedIndex); 
     break; 
    case 9: // enter 
     selectIndex(selectedIndex); 
     e.stopPropagation(); 
     return; 
    case 40: // down 
     selectedIndex++; 
     if (selectedIndex >= numResults) { 
     selectedIndex = numResults-1; 
     } 
     list.attr('data-highlight', selectedIndex); 
     break; 

    default: return; // exit this handler for other keys 
    } 
    e.stopPropagation(); 
    e.preventDefault(); // prevent the default action (scroll/move caret) 
} 

Es funktioniert großartig für einen einzigen Eingabefeld. Es schlägt jedoch für ein zweites Feld fehl, wenn ich ein solches hinzufüge. Meine Idee ist, zwei Suchfelder in einem Formular hinzuzufügen. Eine für den Ursprung und eine Sekunde für den Zielflughafen. Gibt es eine einfache Möglichkeit, dies mit dem obigen Code zu erreichen?

Vielen Dank!

Answer 1

Die Komponente, die Sie ausgewählt haben, benötigt weitere Code-Fixierung, um es für mehrere Instanzen funktionsfähig zu machen. Ich schlage vor, dass Sie einen Blick auf JQuery UI Autocomplete Widget werfen, das Ihre Arbeit perfekt machen kann und für mehrere Instanzen gemacht ist.