14dbfe57d9b670fa554c64cd4604e37fdefe037d
chmalee
Fri Jan 5 15:33:17 2024 -0800
Working version of saving last five user entered terms in the search bar, refs #29611
diff --git src/hg/js/autocomplete.js src/hg/js/autocomplete.js
index d8b38d7..86e5924 100644
--- src/hg/js/autocomplete.js
+++ src/hg/js/autocomplete.js
@@ -1,32 +1,54 @@
// support stuff for auto-complete using jQuery UI's autocomplete widget
//
// requires ajax.js
// requires utils.js
/* suggest (aka gene search)
Requires three elements on page: positionDisplay (static display), positionInput (input textbox) and position (hidden).
*/
+/* jshint esnext: true */
var hgTracks = hgTracks || {};
var suggestBox = {
ajaxGet: function ajaxGet(db) {
// Returns autocomplete source function
// db is the relevant assembly (e.g. "hg18")
var cache = {}; // cache is is used as a hash to cache responses from the server.
return function(request, callback) {
var key = request.term;
+ if (key.length < 2) {
+ // show the most recent searches
+ let searchStack = window.localStorage.getItem("searchStack");
+ if (key.length === 0 && searchStack) {
+ let searchObj = JSON.parse(searchStack);
+ let currDb = getDb();
+ if (currDb in searchObj) {
+ // sort the results list according to the stack order:
+ let entries = Object.entries(searchObj[currDb].results);
+ let stack = searchObj[currDb].stack;
+ let callbackData = [];
+ for (let s of stack) {
+ callbackData.push(searchObj[currDb].results[s]);
+ }
+ callback(callbackData);
+ }
+ return;
+ } else {
+ return;
+ }
+ }
if (!cache[key]) {
$.ajax({
url: "../cgi-bin/hgSuggest",
data: "db=" + db + "&prefix=" + encodeURIComponent(key),
// dataType: "json", // XXXX this doesn't work under IE, so we retrieve as text and do an eval to force to an object.
trueSuccess: function(response, status) {
// We get a lot of duplicate requests (especially the first letters of words),
// so we keep a cache of the suggestions lists we've retreived.
cache[this.key] = response;
this.cont(JSON.parse(response));
},
success: catchErrorOrDispatch,
error: function(request, status, errorThrown) {
// tolerate errors (i.e. don't report them) to avoid spamming people on flaky network connections
// with tons of error messages (#8816).
@@ -58,70 +80,88 @@
init: function(db, assemblySupportsGeneSuggest, selectCallback, clickCallback) {
// selectCallback(item): called when the user selects a new genomic position from the list
// clickCallback(position): called when the user clicks on positionDisplay
this.initialized = true;
var lastSelected = null; // this is the last value entered by the user via a suggestion (used to distinguish manual entry in the same field)
var $posInput = $('#positionInput');
if ($posInput[0] !== document.activeElement) {
// Reset value before adding watermark -- only if user is not already typing here
$posInput.val("");
}
var waterMark = suggestBox.restoreWatermark(db, assemblySupportsGeneSuggest);
if (assemblySupportsGeneSuggest) {
$('#positionInput').autocomplete({
delay: 500,
- minLength: 2,
+ minLength: 0,
source: this.ajaxGet(db),
open: function(event, ui) {
var pos = $(this).offset().top + $(this).height();
if (!isNaN(pos)) {
var maxHeight = $(window).height() - pos - 30; // take off a little more because IE needs it
var auto = $('.ui-autocomplete');
var curHeight = $(auto).children().length * 21;
if (curHeight > maxHeight) $(auto).css({
maxHeight: maxHeight + 'px',
overflow: 'scroll',
zIndex: 12
});
else $(auto).css({
maxHeight: 'none',
overflow: 'hidden',
zIndex: 12
});
}
},
select: function(event, ui) {
lastSelected = ui.item.value;
suggestBox.updateFindMatches(ui.item.internalId);
+ addRecentSearch(db, ui.item.geneSymbol, ui.item);
selectCallback(ui.item);
// jQuery('body').css('cursor', 'wait');
// document.TrackHeaderForm.submit();
}
})
.data("autocomplete")._renderMenu = function(ul, items) {
var that = this;
jQuery.each(items, function(index, item) {
that._renderItem(ul, item);
});
+ if ($(this)[0].term === "") {
+ ul.append("
Showing 5 most recent searches. Enter 2 or more characters to start auto-complete search. Click the go button or press Enter to search across all tracks, hubs and our website. See 'examples' link above.
");
+ } else {
ul.append("
Click the go button or press Enter to search across all tracks, hubs and our website. See 'examples' link above.
");
+ }
+ };
+ $("#positionInput").data("autocomplete")._renderItem = function(ul, item) {
+ // In order to use HTML markup in the autocomplete, one has to overwrite
+ // autocomplete's _renderItem method using .html instead of .text.
+ // http://forum.jquery.com/topic/using-html-in-autocomplete
+ let clockIcon = '';
+ if ($("#positionInput").val().length < 2) {
+ clockIcon = ' ';
+ }
+ return $("")
+ .data("item.autocomplete", item)
+ .append($("").html(clockIcon + item.label))
+ .appendTo(ul);
};
}
// I want to set focus to the suggest element, but unforunately that prevents PgUp/PgDn from
// working, which is a major annoyance.
- // $('#positionInput').focus();
+ $('#positionInput').focus(function() {$(this).autocomplete("search", "");});
$("#positionInput").change(function(event) {
if (!lastSelected || lastSelected !== $('#positionInput').val()) {
// This handles case where user typed or edited something rather than choosing from a suggest list;
// in this case, we only change the position hidden; we do NOT update the displayed coordinates.
var val = $('#positionInput').val();
// handles case where users zeroes out positionInput; in that case we revert to currently displayed position
if (!val || val.length === 0 || val === waterMark)
val = $('#positionDisplay').text();
else
val = val.replace(/\u2013|\u2014/g, "-"); // replace en-dash and em-dash with hyphen
$('#position').val(val);
suggestBox.clearFindMatches();
}
});