JavaScriptオートコンプリート入力フィールドを複製する方法

Question

私はオートコンプリート空港検索スクリプトを見つけました。次の場所にあります。

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

入力フィールドがある：

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

実際のJavaScriptコードは次のとおりです。

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

それは1つの入力フィールドのための素晴らしい作品。しかし、それを追加すると2番目のフィールドで失敗します。私の考えはフォームに2つの検索フィールドを追加することです。 1つは出発地、もう1つは目的地空港です。上記のコードでこれを達成する簡単な方法はありますか？

ありがとうございました！

Answer 1

複数のインスタンスで使用できるようにするために、選択したコンポーネントがさらにコードを修正する必要があります。 JQuery UI Autocompleteウィジェットをご覧になることをお勧めします。このウィジェットは、あなたの仕事を完璧に行うことができ、複数のインスタンス用に作られています。