JavaScript自动完成插件-如何排除对象中的参数？

Question

我正在使用devbridge.com的一个名为Autocomplete的插件。 我遇到的问题是过滤自动完成结果以排除某些选项，具体取决于用户在另一个文本框中键入的内容。 这是我的HTML：

<div class="check_in_questions">
    <label id="label_new_home" for="location_pickup">Pickup Up Location</label>
    <br>
    <input id="location_pickup" class="autocomplete" type="text" placeholder="Pickup Location">
</div>
<div class="check_in_questions">
    <label id="label_new_home" for="location_dropoff">Drop-Off Location</label>
    <br>
    <input id="location_dropoff" class="autocomplete" type="text" placeholder="Drop-Off Location">
</div>

和JavaScript：

var data = [
{ 
    value: 'Orlando International Airport (MCO)', 
    data: { 
            category: 'Airport',
            address: '1 Jeff Fuqua Blvd., Orlando, FL',
            airport: 'MCO',
            location: 'Orlando'
          } 
},
{ 
    value: 'Orlando Sanford International Airport (SFB)', 
    data: { 
            category: 'Airport',
            address: '1200 Red Cleveland Blvd., Sanford, FL',
            airport: 'SFB',
            location: 'Orlando'
          } 
},
{ 
    value: 'Port Canaveral Cruise Terminal', 
    data: { 
            category: 'Cruise Terminal',
            address: 'Port Canaveral, FL',
            airport: '',
            location: 'Port Canaveral'
          } 
},
{ 
    value: 'Baymont Inn & Suites Florida Mall/Orlando', 
    data: { 
            category: 'Hotel',
            address: '8820 S Orange Blossom Trail, Orlando, FL',
            airport: '',
            location: 'Orlando'
          } 
}
];

$('.autocomplete').devbridgeAutocomplete( {
    lookup: data,
    groupBy: 'category',
    lookupFilter: function (suggestion, query, queryLowerCase) {
        return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0 
        || suggestion.data.category.toLowerCase().indexOf(queryLowerCase) === 0 
        || suggestion.data.location.toLowerCase().indexOf(queryLowerCase) === 0 
        || suggestion.data.address.toLowerCase().indexOf(queryLowerCase) === 0 
        || suggestion.data.airport.toLowerCase().indexOf(queryLowerCase) === 0;
    }
});

$('#location_pickup').change(function() {
    if (get_location($(this).val()) != '') {
        $(this).setOptions({ params: 
                            { data: 
                            { location: !get_location($('#location_dropoff').val()) }
                            } 
                          });
    }
});

$('#location_dropoff').change(function() {
    if (get_location($(this).val()) != '') {
        $(this).setOptions({ params: 
                            { data: 
                            { location: !get_location($('#location_pickup').val()) }
                            } 
                          });
    }
});

function get_location(string) {
    var location;

    if (data.some(function(item, index, array) { i = index; return item.value == string})) {
        location = data[i].data.location;
    }

    return location;
}

问题是我不知道如何设置params属性以从两个文本框的另一个文本框中排除相同的位置。

这是一个正在工作的JSFiddle

任何帮助将不胜感激。

Answer 1

您无需进行change事件。 所有这些都可以通过插件filter功能完成。

 var data = [ { value: 'Orlando International Airport (MCO)', data: { category: 'Airport', address: '1 Jeff Fuqua Blvd., Orlando, FL', airport: 'MCO', location: 'Orlando'} }, { value: 'Orlando Sanford International Airport (SFB)', data: { category: 'Airport', address: '1200 Red Cleveland Blvd., Sanford, FL', airport: 'SFB', location: 'Orlando'} }, { value: 'Port Canaveral Cruise Terminal', data: { category: 'Cruise Terminal', address: 'Port Canaveral, FL', airport: '', location: 'Port Canaveral'} }, { value: 'Baymont Inn & Suites Florida Mall/Orlando', data: { category: 'Hotel', address: '8820 S Orange Blossom Trail, Orlando, FL', airport: '', location: 'Orlando'} } ]; $('.autocomplete').each(function(i, item) { $(item).devbridgeAutocomplete( { lookup: data, groupBy: 'category', lookupFilter: function (suggestion, query, queryLowerCase) { // First ensure not the same as other location var $check = $(item).attr("id") == "location_pickup" ? $('#location_dropoff').val() : $('#location_pickup').val(); // Check location conditions if ( (suggestion.data.category == 'Port' && get_category($check) == 'Port') || (suggestion.data.category == 'Hotel' && get_category($check) == 'Hotel') || (suggestion.data.category == 'Airport' && get_category($check) == 'Airport') || (suggestion.data.category == 'Airport' && get_category($check) == 'Hotel') && (suggestion.data.location == 'Orlando' && get_location($check) == 'Orlando') || (suggestion.data.category == 'Hotel' && get_category($check) == 'Airport') && (suggestion.data.location == 'Orlando' && get_location($check) == 'Orlando') || ((suggestion.data.category == 'Port' && get_category($check) == 'Hotel') && (suggestion.data.location == get_location($check))) || ((suggestion.data.category == 'Hotel' && get_category($check) == 'Port') && (suggestion.data.location == get_location($check))) ) return false; return suggestion.value.toLowerCase().indexOf(queryLowerCase) === 0 || suggestion.data.category.toLowerCase().indexOf(queryLowerCase) === 0 || suggestion.data.location.toLowerCase().indexOf(queryLowerCase) === 0 || suggestion.data.address.toLowerCase().indexOf(queryLowerCase) === 0 || suggestion.data.airport.toLowerCase().indexOf(queryLowerCase) === 0; } }); }); function get_location(string) { var location; if (data.some(function(item, index, array) { i = index; return item.value == string})) { location = data[i].data.location; } return location; } function get_category(string) { var category; if (data.some(function(item, index, array) { i = index; return item.value == string})) { category = data[i].data.category; } return category; } 

 .check_in_questions { float: left; margin-right: 25px; } input { width: 250px; } .autocomplete-suggestions { border: 1px solid #999; background: #FFF; overflow: auto; } .autocomplete-suggestion { padding: 5px 10px; white-space: nowrap; overflow: hidden; } .autocomplete-selected { background: #F0F0F0; } .autocomplete-suggestions strong { font-weight: normal; color: #3399FF; } .autocomplete-group { padding: 10px; } .autocomplete-group strong { display: block; border-bottom: 1px solid #000; font-size: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://dev.goportorlando.com/plugins/autocomplete/js/jquery.autocomplete.min.js"></script> <div class="check_in_questions"> <label id="label_new_home" for="location_pickup">Pickup Up Location</label> <br> <input id="location_pickup" class="autocomplete" type="text" placeholder="Pickup Location"> </div> <div class="check_in_questions"> <label id="label_new_home" for="location_dropoff">Drop-Off Location</label> <br> <input id="location_dropoff" class="autocomplete" type="text" placeholder="Drop-Off Location"> </div>