JavaScript 自动完成插件 - 如何排除对象中的参数?
JavaScript Autocomplete Plugin - How do you exclude parameters in an object?
我正在使用 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
如有任何帮助,我们将不胜感激。
您不需要参加 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>
我正在使用 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
如有任何帮助,我们将不胜感激。
您不需要参加 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>