8e79dfb0a847350cc64929a9498289d22072d9d8 larrym Thu Jun 28 17:38:36 2012 -0700 set hgFind.matches to highlight items choosen by users (#6330) diff --git src/hg/js/autocomplete.js src/hg/js/autocomplete.js index 6b46ac2..dd5892f 100644 --- src/hg/js/autocomplete.js +++ src/hg/js/autocomplete.js @@ -71,71 +71,90 @@ }).responseText; if(str) { var obj = eval(str); if(obj.length == 1) { return obj[0].id; } } return null; } /* suggest (aka gene search) Requires three elements on page: positionDisplay (static display), positionInput (input textbox) and position (hidden). */ var suggestBox = { + clearFindMatches: function() + { + // clear any hgFind.matches set by a previous user selection (e.g. when user directly edits the search box) + if($('#hgFindMatches').length) + $('#hgFindMatches').remove(); + }, + + updateFindMatches: function(val) + { + // highlight genes choosen from suggest list (#6330) + if($('#hgFindMatches').length) + $('#hgFindMatches').val(val); + else + $('#positionInput').parents('form').append("<input type='hidden' id='hgFindMatches' name='hgFind.matches' " + "value='" + val + "'>"); + }, + 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 - var lastEntered = null; // this is the last value entered by the user via a suggestion (used to distinguish manual entry in the same field) + 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 str; if(assemblySupportsGeneSuggest) { str = "enter new position, gene symbol or annotation search terms"; } else { str = "enter new position or annotation search terms"; } $('#positionInput').Watermark(str, '#686868'); if(assemblySupportsGeneSuggest) { $('#positionInput').autocomplete({ delay: 500, minLength: 2, source: ajaxGet(db, new Object), 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'}); else $(auto).css({maxHeight: 'none', overflow:'hidden'}); } }, select: function (event, ui) { selectCallback(ui.item); - lastEntered = ui.item.value; + lastSelected = ui.item.value; + suggestBox.updateFindMatches(ui.item.internalId); // jQuery('body').css('cursor', 'wait'); // document.TrackHeaderForm.submit(); } }); } // 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").change(function(event) { - if(!lastEntered || lastEntered != $('#positionInput').val()) { + 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. $('#position').val($('#positionInput').val()); + suggestBox.clearFindMatches(); } }); $("#positionDisplay").click(function(event) { // this let's the user click on the genomic position (e.g. if they want to edit it) clickCallback($(this).text()); $('#positionInput').val($(this).text()); + suggestBox.clearFindMatches(); }); } }