3

I'm aware of the same question posted at: Always show a specific choice in jQuery Autocomplete even if it doesn't match input

The problem is when using the open function as suggested as a solution in the above question, the event is only triggered when there is a matching item within the autocomplete list. Therefore, the specific choice is not always shown when the user is typing in search box.

https://jsfiddle.net/u1jwz6s4/

<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

</body>
</html>

$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp",    "ruby" ],
open: function(){
$('.ui-autocomplete').prepend("search by keyword")
},
});

I want to display "search as keyword" as an option at the very top always, whether there is a matching string or not while user is typing in search box. Currently, "search as keyword" is only displayed at top when a matching string is found. Also, is there anyway to make "search as keyword" a clickable event within the search form? See the jsfiddle to see what I'm describing.

wormyworm
  • 179
  • 8

1 Answers1

2

You can use a response option to unshift the search by keyword string to the array of displayed labels:

const $input = $("#autocomplete");
$input.autocomplete({
  source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
  response: (event, ui) => {
    const label = 'search by keyword';
    ui.content.unshift({
      label,
      value: $input.val()
    });
  }
});
$(document).on('click', '.ui-autocomplete div:contains("search by keyword")', () => {
  console.log('searching for ' + $input.val());
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
CertainPerformance
  • 356,069
  • 52
  • 309
  • 320
  • How do you submit the actual keyword value that is typed in search box on click as opposed to "search by keyword" that overwrites the actual value? – wormyworm Feb 18 '19 at 04:43
  • It's pretty weird to have an autocomplete label that's actually meant to act as a button - it would be pretty confusing for users, I think. But if you *had* to do something like that, you can use event delegation for `click` events on the `search by keyword` div, see edit – CertainPerformance Feb 18 '19 at 04:54
  • Exactly what I wanted to accomplish. Thank you. – wormyworm Feb 18 '19 at 05:03
  • I know this might be another weird thing to do, but how could I set the autoFocus event to always focus the second label as opposed to the now first(search by keyword) ? I think by default, autoFocus focus's on the first label. – wormyworm Feb 18 '19 at 05:09
  • I've never heard of the `autoFocus` event, what is it? I know of the *attribute* `autofocus` which can be set to an `input`-like element – CertainPerformance Feb 18 '19 at 05:11
  • Oops, Yes, sorry. I meant the attribute autoFocus: true , see http://api.jqueryui.com/autocomplete/#option-autoFocus – wormyworm Feb 18 '19 at 05:12
  • The label isn't focusable - it's not an input element, nor does it have an `` or something, so I'm not sure what you're thinking of. – CertainPerformance Feb 18 '19 at 05:14
  • Hmm, from the link I posted above, autoFocus : "If set to true the first item will automatically be focused when the menu is shown." – wormyworm Feb 18 '19 at 05:17
  • 1
    Oh, the jQuery option, not the attribute. See [here](https://stackoverflow.com/questions/14572817/focus-on-a-jquery-autocomplete-result-not-necessarily-the-first) - you can select the `uiAutocomplete` menu object and call `menu.focus(null, $('li', menu.element).eq(1));` inside the `open` handler. – CertainPerformance Feb 18 '19 at 05:32
  • For the on 'click' search by keyword: Is there a way to make this work when pressing 'enter' as well? I tried on 'keypress' to no avail. – wormyworm Feb 21 '19 at 06:57
  • Keypress listener works just fine: `$input.on("keypress", ({ key }) => { if (key === 'Enter') { < do stuff > } });` – CertainPerformance Feb 21 '19 at 07:03
  • Sorry to bother you more on this. I really appreciate your help with everything. I can't seem to get the enter keypress to work. Here is the jsfiddle attempting to use the above code: https://jsfiddle.net/meh7wud9/ – wormyworm Feb 21 '19 at 07:14
  • You pasted in different code, so it doesn't work. The `keypress` event can only be seen from the autocomplete input, not from a label. – CertainPerformance Feb 21 '19 at 07:15
  • So there isn't a way to get a keypress event to work on 'search by keyword' label ? Only 'click' event will work ? – wormyworm Feb 21 '19 at 07:24
  • 1
    The user has already focused on the input field, so just listen for enter on the input field? It wouldn't make sense to press enter on a non-input field https://jsfiddle.net/pv8g5ct4/ – CertainPerformance Feb 21 '19 at 07:38
  • Thank you, you have been so much help! – wormyworm Feb 21 '19 at 08:04