// Exported for unit testing exports.is_using_input_method = false; function narrow_or_search_for_term(search_string) { const search_query_box = $("#search_query"); if (exports.is_using_input_method) { // Neither narrow nor search when using input tools as // `updater` is also triggered when 'enter' is triggered // while using input tool return search_query_box.val(); } ui_util.change_tab_to('#home'); let operators; if (page_params.search_pills_enabled) { // search_string only contains the suggestion selected // from the typeahead. base_query stores the query // corresponding to the existing pills. const base_query = search_pill.get_search_string_for_current_filter( search_pill_widget.widget); const base_operators = Filter.parse(base_query); const suggestion_operator = Filter.parse(search_string); operators = base_operators.concat(suggestion_operator); } else { operators = Filter.parse(search_string); } narrow.activate(operators, {trigger: 'search'}); // It's sort of annoying that this is not in a position to // blur the search box, because it means that Esc won't // unnarrow, it'll leave the searchbox. // Narrowing will have already put some operators in the search box, // so leave the current text in. search_query_box.blur(); return search_query_box.val(); } function update_buttons_with_focus(focused) { const search_query_box = $('#search_query'); // Show buttons iff the search input is focused, or has non-empty contents, // or we are narrowed. if (focused || search_query_box.val() || narrow_state.active()) { $('.search_button').prop('disabled', false); } else { $('.search_button').prop('disabled', true); } } exports.update_button_visibility = function () { update_buttons_with_focus($('#search_query').is(':focus')); }; exports.initialize = function () { const search_query_box = $('#search_query'); const searchbox_form = $('#searchbox_form'); const searchbox = $('#searchbox'); // Data storage for the typeahead. // This maps a search string to an object with a "description" field. // (It's a bit of legacy that we have an object with only one important // field. There's also a "search_string" field on each element that actually // just represents the key of the hash, so it's redundant.) let search_object = {}; search_query_box.typeahead({ source: function (query) { let suggestions; if (page_params.search_pills_enabled) { const base_query = search_pill.get_search_string_for_current_filter( search_pill_widget.widget); suggestions = search_suggestion.get_suggestions(base_query, query); } else { suggestions = search_suggestion.get_suggestions_legacy(query); } // Update our global search_object hash search_object = suggestions.lookup_table; return suggestions.strings; }, fixed: true, items: search_suggestion.max_num_of_search_results, helpOnEmptyStrings: true, naturalSearch: true, highlighter: function (item) { const obj = search_object[item]; return obj.description; }, matcher: function () { return true; }, updater: function (search_string) { // Order is important here. narrow_or_search_for_term // gets a search string from existing pills and obtains // existing operators. Newly selected suggestion is added // to those operators. If narrow_or_search_for_term was // called after append_search_string, the existing search // pills at the time for calling that function would also // have the newly selected suggestion, and appending it again // would cause duplication. const result = narrow_or_search_for_term(search_string); if (page_params.search_pills_enabled) { search_pill.append_search_string(search_string, search_pill_widget.widget); $("#search_query").focus(); } else { return result; } }, sorter: function (items) { return items; }, stopAdvance: page_params.search_pills_enabled, advanceKeyCodes: [8], }); searchbox_form.on('compositionend', function () { // Set `is_using_input_method` to true if enter is pressed to exit // the input tool popover and get the text in the search bar. Then // we suppress searching triggered by this enter key by checking // `is_using_input_method` before searching. // More details in the commit message that added this line. exports.is_using_input_method = true; }); searchbox_form.keydown(function (e) { exports.update_button_visibility(); const code = e.which; if (code === 13 && search_query_box.is(":focus")) { // Don't submit the form so that the typeahead can instead // handle our Enter keypress. Any searching that needs // to be done will be handled in the keyup. return false; } }).keyup(function (e) { if (exports.is_using_input_method) { exports.is_using_input_method = false; return; } const code = e.which; if (code === 13 && search_query_box.is(":focus")) { // We just pressed enter and the box had focus, which // means we didn't use the typeahead at all. In that // case, we should act as though we're searching by // operators. (The reason the other actions don't call // this codepath is that they first all blur the box to // indicate that they've done what they need to do) narrow.activate(Filter.parse(search_query_box.val()), {trigger: 'search'}); search_query_box.blur(); update_buttons_with_focus(false); } }); // Some of these functions don't actually need to be exported, // but the code was moved here from elsewhere, and it would be // more work to re-order everything and make them private. $('#search_exit').on('click', narrow.deactivate); search_query_box.on('focus', exports.focus_search); search_query_box.on('blur', function () { // The search query box is a visual cue as to // whether search or narrowing is active. If // the user blurs the search box, then we should // update the search string to reflect the current // narrow (or lack of narrow). // // But we can't do this right away, because // selecting something in the typeahead menu causes // the box to lose focus a moment before. // // The workaround is to check 100ms later -- long // enough for the search to have gone through, but // short enough that the user won't notice (though // really it would be OK if they did). setTimeout(function () { const search_string = narrow_state.search_string(); search_query_box.val(search_string); exports.update_button_visibility(); }, 100); }); if (page_params.search_pills_enabled) { // Uses jquery instead of pure css as the `:focus` event occurs on `#search_query`, // while we want to add box-shadow to `#searchbox`. This could have been done // with `:focus-within` CSS selector, but it is not supported in IE or Opera. searchbox.on('focusin', function () { searchbox.css({"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"}); }); searchbox.on('focusout', function () { searchbox.css({"box-shadow": "unset"}); }); } }; exports.focus_search = function () { // The search bar is not focused yet, but will be. update_buttons_with_focus(true); }; exports.initiate_search = function () { if (page_params.search_pills_enabled) { $('#search_query').focus(); } else { $('#search_query').select(); } }; exports.clear_search_form = function () { $('#search_query').val(''); $('#search_query').blur(); $('.search_button').prop('disabled', true); }; window.search = exports;