Skip to content

Feat #487 multi source async results #488

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
running-coder merged 2 commits into from
Oct 31, 2019
Merged

Feat #487 multi source async results #488

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e954ac5
Feat #487 multi source async results
Oct 22, 2019
8a805fe
add `asyncResult` tests
Oct 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/jquery.typeahead.min.js
View file
Open in desktop

Large diffs are not rendered by default.

238 changes: 238 additions & 0 deletions example/demo-asyncResult_v1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,238 @@
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">

<title></title>
<meta name="description" content="">
<meta name="author" content="">

<link rel="stylesheet" href="../src/jquery.typeahead.css">

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<!--script src="../dist/jquery.typeahead.min.js"></script-->
<script src="../src/jquery.typeahead.js"></script>

</head>
<body>

<div style="width: 100%; max-width: 800px; margin: 0 auto;">

<h1>AsyncResult_v1 Demo</h1>

<ul>
<li>
<a href="http://www.runningcoder.org/jquerytypeahead/documentation/">Documentation</a>
</li>
<li>
<a href="http://www.runningcoder.org/jquerytypeahead/demo/">Demos</a>
</li>
</ul>

<div class="js-result-container"></div>

<form>
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input class="js-typeahead"
name="q"
autofocus
autocomplete="off">
</div>
<div class="typeahead__button">
<button type="submit">
<span class="typeahead__search-icon"></span>
</button>
</div>
</div>
</div>
</form>

<script>

var data = {
countries: ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda",
"Argentina", "Armenia", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh",
"Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia",
"Bosnia and Herzegovina", "Botswana", "Brazil", "Brunei", "Bulgaria", "Burkina Faso", "Burma",
"Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Central African Republic", "Chad",
"Chile", "China", "Colombia", "Comoros", "Congo, Democratic Republic", "Congo, Republic of the",
"Costa Rica", "Cote d'Ivoire", "Croatia", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti",
"Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador",
"Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Fiji", "Finland", "France", "Gabon",
"Gambia", "Georgia", "Germany", "Ghana", "Greece", "Greenland", "Grenada", "Guatemala", "Guinea",
"Guinea-Bissau", "Guyana", "Haiti", "Honduras", "Hong Kong", "Hungary", "Iceland", "India",
"Indonesia", "Iran", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan",
"Kazakhstan", "Kenya", "Kiribati", "Korea, North", "Korea, South", "Kuwait", "Kyrgyzstan", "Laos",
"Latvia", "Lebanon", "Lesotho", "Liberia", "Libya", "Liechtenstein", "Lithuania", "Luxembourg",
"Macedonia", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands",
"Mauritania", "Mauritius", "Mexico", "Micronesia", "Moldova", "Mongolia", "Morocco", "Monaco",
"Mozambique", "Namibia", "Nauru", "Nepal", "Netherlands", "New Zealand", "Nicaragua", "Niger",
"Nigeria", "Norway", "Oman", "Pakistan", "Panama", "Papua New Guinea", "Paraguay", "Peru",
"Philippines", "Poland", "Portugal", "Romania", "Russia", "Rwanda", "Samoa", "San Marino",
"Sao Tome", "Saudi Arabia", "Senegal", "Serbia and Montenegro", "Seychelles", "Sierra Leone",
"Singapore", "Slovakia", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "Spain",
"Sri Lanka", "Sudan", "Suriname", "Swaziland", "Sweden", "Switzerland", "Syria", "Taiwan",
"Tajikistan", "Tanzania", "Thailand", "Togo", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey",
"Turkmenistan", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States",
"Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Yemen", "Zambia", "Zimbabwe"],
capitals: ["Abu Dhabi", "Abuja", "Accra", "Adamstown", "Addis Ababa", "Algiers", "Alofi", "Amman", "Amsterdam",
"Andorra la Vella", "Ankara", "Antananarivo", "Apia", "Ashgabat", "Asmara", "Astana", "Asunción", "Athens",
"Avarua", "Baghdad", "Baku", "Bamako", "Bandar Seri Begawan", "Bangkok", "Bangui", "Banjul", "Basseterre",
"Beijing", "Beirut", "Belgrade", "Belmopan", "Berlin", "Bern", "Bishkek", "Bissau", "Bogotá", "Brasília",
"Bratislava", "Brazzaville", "Bridgetown", "Brussels", "Bucharest", "Budapest", "Buenos Aires", "Bujumbura",
"Cairo", "Canberra", "Caracas", "Castries", "Cayenne", "Charlotte Amalie", "Chisinau", "Cockburn Town",
"Conakry", "Copenhagen", "Dakar", "Damascus", "Dhaka", "Dili", "Djibouti", "Dodoma", "Doha", "Douglas",
"Dublin", "Dushanbe", "Edinburgh of the Seven Seas", "El Aaiún", "Episkopi Cantonment", "Flying Fish Cove",
"Freetown", "Funafuti", "Gaborone", "George Town", "Georgetown", "Georgetown", "Gibraltar", "King Edward Point",
"Guatemala City", "Gustavia", "Hagåtña", "Hamilton", "Hanga Roa", "Hanoi", "Harare", "Hargeisa", "Havana",
"Helsinki", "Honiara", "Islamabad", "Jakarta", "Jamestown", "Jerusalem", "Juba", "Kabul", "Kampala",
"Kathmandu", "Khartoum", "Kiev", "Kigali", "Kingston", "Kingston", "Kingstown", "Kinshasa", "Kuala Lumpur",
"Kuwait City", "Libreville", "Lilongwe", "Lima", "Lisbon", "Ljubljana", "Lomé", "London", "Luanda", "Lusaka",
"Luxembourg", "Madrid", "Majuro", "Malabo", "Malé", "Managua", "Manama", "Manila", "Maputo", "Marigot",
"Maseru", "Mata-Utu", "Mbabane Lobamba", "Melekeok Ngerulmud", "Mexico City", "Minsk", "Mogadishu", "Monaco",
"Monrovia", "Montevideo", "Moroni", "Moscow", "Muscat", "Nairobi", "Nassau", "Naypyidaw", "N'Djamena",
"New Delhi", "Niamey", "Nicosia", "Nicosia", "Nouakchott", "Nouméa", "Nukuʻalofa", "Nuuk", "Oranjestad",
"Oslo", "Ottawa", "Ouagadougou", "Pago Pago", "Palikir", "Panama City", "Papeete", "Paramaribo", "Paris",
"Philipsburg", "Phnom Penh", "Plymouth Brades Estate", "Podgorica Cetinje", "Port Louis", "Port Moresby",
"Port Vila", "Port-au-Prince", "Port of Spain", "Porto-Novo Cotonou", "Prague", "Praia", "Cape Town",
"Pristina", "Pyongyang", "Quito", "Rabat", "Reykjavík", "Riga", "Riyadh", "Road Town", "Rome", "Roseau",
"Saipan", "San José", "San Juan", "San Marino", "San Salvador", "Sana'a", "Santiago", "Santo Domingo",
"São Tomé", "Sarajevo", "Seoul", "Singapore", "Skopje", "Sofia", "Sri Jayawardenepura Kotte", "St. George's",
"St. Helier", "St. John's", "St. Peter Port", "St. Pierre", "Stanley", "Stepanakert", "Stockholm", "Sucre",
"Sukhumi", "Suva", "Taipei", "Tallinn", "Tarawa Atoll", "Tashkent", "Tbilisi", "Tegucigalpa", "Tehran",
"Thimphu", "Tirana", "Tiraspol", "Tokyo", "Tórshavn", "Tripoli", "Tskhinvali", "Tunis", "Ulan Bator", "Vaduz",
"Valletta", "The Valley", "Vatican City", "Victoria", "Vienna", "Vientiane", "Vilnius", "Warsaw",
"Washington, D.C.", "Wellington", "West Island", "Willemstad", "Windhoek", "Yamoussoukro", "Yaoundé", "Yaren",
"Yerevan", "Zagreb"]
};

typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead",
minLength: 1,
order: "asc",
group: true,
maxItemPerGroup: 3,
asyncResult: true,
groupOrder: function (node, query, result, resultCount, resultCountPerGroup) {

var scope = this,
sortGroup = [];

for (var i in result) {
sortGroup.push({
group: i,
length: result[i].length
});
}

sortGroup.sort(
scope.helper.sort(
["length"],
false, // false = desc, the most results on top
function (a) {
return a.toString().toUpperCase()
}
)
);

return $.map(sortGroup, function (val, i) {
return val.group
});
},
hint: true,
dropdownFilter: "All",
href: "https://en.wikipedia.org/?title={{display}}",
template: "{{display}}, <small><em>{{group}}</em></small>",
emptyTemplate: "no result for {{query}}",
source: {
user: {
dynamic: true,
template: "{{login}}, <small><em>{{group}}</em></small>",
href: "https://www.github.com/{{username}}",
data: [{
"id": 415849,
"username": "an inserted user that is not inside the database",
"avatar": "https://avatars3.githubusercontent.com/u/415849"
}],
display: ['login'],
ajax: {
url: "https://api.github.com/repos/running-coder/jquery-typeahead/contributors",
}
},
country: {
data: data.countries
},
capital: {
data: function() {
var deferred = $.Deferred();
// Gather your data, and resolve the deferred object with an array of objects
// setTimeout is used only to show that the data is async
setTimeout(function() {
deferred.resolve(data.capitals);
}, 3000);
deferred.always(function() {
console.log("yay! :D");
});
return deferred;
}
}
},
callback: {
onClickAfter: function (node, a, item, event) {
event.preventDefault();

var r = confirm("You will be redirected to:\n" + item.href + "\n\nContinue?");
if (r == true) {
window.open(item.href);
}

$('.js-result-container').text('');

},
onResult: function (node, query, obj, objCount) {

console.log(objCount)

var text = "";
if (query !== "") {
text = objCount + ' elements matching "' + query + '"';
}
$('.js-result-container').text(text);

},
onLayoutBuiltBefore: function (node, query, result, resultHtmlList) {
if (!resultHtmlList
|| !this.generateGroups.length
|| this.displayEmptyTemplate
|| this.generatedGroupCount === this.generateGroups.length
) return;


this.generateGroups.forEach(function (group) {
if (!resultHtmlList.find('[data-search-group="' + group + '"]').length) {
resultHtmlList.append('<li class="typeahead__group" data-search-group="' + group + '">\
<a href="javascript:;" tabindex="-1">' + group + '</a>\
</li>\
<li class="typeahead__item" data-group="" data-index="-1">\
<span style="padding: 0.5rem 0.75rem;display: block;">Loading...</span>\
</li>'
);
}
});

return resultHtmlList;

}
},
debug: true
});

</script>

</div>

</body>
</html>
38 changes: 28 additions & 10 deletions src/jquery.typeahead.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
* Licensed under the MIT license
*
* @author Tom Bertrand
* @version 2.10.7 (2019-10-19)
* @version 2.10.7 (2019-10-22)
* @link http://www.runningcoder.org/jquerytypeahead/
*/
(function (factory) {
Expand Down Expand Up @@ -75,6 +75,7 @@
emptyTemplate: false, // Display an empty template if no result
cancelButton: true, // If text is detected in the input, a cancel button will be available to reset the input (pressing ESC also cancels)
loadingAnimation: true, // Display a loading animation when typeahead is doing request / searching for results
asyncResult: false, // If set to true, the search results will be displayed as they are beging received from the requests / async data function
filter: true, // Set to false or function to bypass Typeahead filtering. WARNING: accent, correlativeTemplate, offset & matcher will not be interpreted
matcher: null, // Add an extra filtering function after the typeahead functions
source: null, // Source of data for Typeahead to filter
Expand Down Expand Up @@ -218,7 +219,7 @@
this.label = {}; // The label object
this.hasDragged = false; // Will cancel mouseend events if true
this.focusOnly = false; // Focus the input preventing any operations
this.displayEmptyTemplate // Display the empty template in the result list
this.displayEmptyTemplate; // Display the empty template in the result list

this.__construct();
};
Expand Down Expand Up @@ -832,6 +833,9 @@

generateSource: function (generateGroups) {
this.filterGenerateSource();

this.generatedGroupCount = 0;

if (Array.isArray(generateGroups) && generateGroups.length) {
this.generateGroups = generateGroups;
} else if (!this.generateGroups.length) {
Expand All @@ -840,7 +844,6 @@
}

this.requestGroups = [];
this.generatedGroupCount = 0;
this.options.loadingAnimation && this.container.addClass("loading");

if (!this.helper.isEmpty(this.xhr)) {
Expand All @@ -866,6 +869,10 @@
cache = groupSource.cache;
compression = groupSource.compression;

if (this.options.asyncResult) {
delete this.source[group];
}

if (cache) {
dataInStorage = window[cache].getItem(
"TYPEAHEAD_" + this.selector + ":" + group
Expand Down Expand Up @@ -941,6 +948,10 @@
this.handleRequests();
}

if (this.options.asyncResult && this.searchGroups.length !== this.generateGroups) {
this.node.trigger("search" + this.namespace);
}

return !!this.generateGroups.length;
},

Expand Down Expand Up @@ -1507,28 +1518,33 @@
);
}

this.incrementGeneratedGroup();
this.incrementGeneratedGroup(group);
},

incrementGeneratedGroup: function () {
incrementGeneratedGroup: function (group) {
this.generatedGroupCount++;
if (this.generatedGroupCount !== this.generateGroups.length) {
if (this.generatedGroupCount !== this.generateGroups.length && !this.options.asyncResult) {
return;
}

this.xhr = {};
if (this.xhr && this.xhr[group]) {
delete this.xhr[group];
}

for (var i = 0, ii = this.generateGroups.length; i < ii; i++) {
this.source[this.generateGroups[i]] = this.tmpSource[
this.generateGroups[i]
];
];
}

if (!this.hasDynamicGroups) {
this.buildDropdownItemLayout("dynamic");
}

this.options.loadingAnimation && this.container.removeClass("loading");
if (this.generatedGroupCount === this.generateGroups.length) {
this.xhr = {};
this.options.loadingAnimation && this.container.removeClass("loading");
}
this.node.trigger("search" + this.namespace);
},

Expand Down Expand Up @@ -1849,6 +1865,8 @@
this.options.source[group].matcher) ||
matcher;

if (!this.source[group]) continue;

for (var k = 0, kk = this.source[group].length; k < kk; k++) {
if (this.resultItemCount >= maxItem && !this.options.callback.onResult) break;
if (hasDynamicFilters && !this.dynamicFilter.validate.apply(this, [this.source[group][k]])) continue;
Expand Down Expand Up @@ -2144,7 +2162,7 @@
}

var emptyTemplate;
if (!this.result.length) {
if (!this.result.length && this.generatedGroupCount === this.generateGroups.length) {
if (
this.options.multiselect &&
this.options.multiselect.limit &&
Expand Down
Loading