Submit Search Only On Enter Key?

[ghost]

How can I disable instant search and submit only when ENTER key pressed? Thank you!

[lubber-de]

There exists an undocumented setting automatic. Set this to false

$('.ui.search')
  .search({
    automatic: false
  })
;

[ghost]

It's not working if search results box is open. Is it possible to re-submit and re-open search results box when new word is typed and enter key is pressed? Or is this a bug!?

[lubber-de]

The Enter key is already occupied to handle selection of a result entry, thus it cannot be used as a search trigger when the results are shown.
If you still use automatic:false but add one little custom event to hide the results whenever you type something into the search input, you will achieve, what you want:
See https://jsfiddle.net/lubber/9aqdexz5/13/

$('.ui.search')
  .search({
    automatic: false
;
$('.ui.search > input').on('keydown',function(){
	$('.ui.search').search('hideResults');
})

[ghost]

I found workaround for the first issue, to re-submit anytime enter key pressed.

$('.ui.search').on('keypress', function(e) {
  if (e.keyCode == 13) { $('input').focus().select(); }
});

Now I only need to figureout how to check for empty input and close results box if its empty. Anyone? Thanks!

[lubber-de]

Here you are 🙂
https://jsfiddle.net/lubber/9aqdexz5/18/

$('.ui.search')
  .search({
    automatic: false
;
$('.ui.search > input').on('keyup',function(){
  if(this.value === '') {
    $('.ui.search').search('hideResults');
  }
})

[ghost]

Here is how my code looks and it works perfect. Thank you for unofficial setting "automatic: false".

<div class="ui category search">
  <div class="ui transparent icon input">
    <input id="search" class="prompt" type="text" >
    <i class="search link icon"></i>
  </div>
  <div class="results"></div>
</div>

// fixes "backspace" key issue.
$('#search').on('keyup',function(){
  if ($.trim($(this).val()).length == 0) {
    $('#search').blur(); // hide results
    $('#search').focus().select(); // focus input
  }
});

// fixes "enter" (submit) key issue.
$('.ui.search').on('keyup', function(e) {
  if (e.keyCode == 13) {
    $('#search').focus().select();
  }
});

// search javascript
$('.ui.search').search({
  apiSettings: {
    method: 'POST',
    url: '/search?find={query}',
    onAbort: function() { return false; },
    onError: function() { return false; },
    onFailure: function() { return false; }
  },
  fields: {
    url: 'link',
    title: 'name'
  },
  onSelect: function(e) {
    window.location.href = e.link;
    // fixes result box showing, after result selected.
    // $('#search').blur(); // using "onAbort", "onError", "onFailure" instead.
  },
  maxResults: 10,
  minCharacters: 5,
  automatic: false
});

[ghost]

[lubber-de]

Please provide or adjust my given jsfiddle to your use case for easier investigation, because my example basically does exactly what you wanted: it only reacts on ENTER and hides a result box when the input is empty (you don't need to catch the backspace key and blur the field). Personally i would not even check for an empty input field, but remove the result box whenever you type something, but this is up to your decision 😉

https://jsfiddle.net/lubber/9aqdexz5/18

[ghost]

Nevermind resolved it with few fixes, see above changes.

[ghost]

Is there an option to also disable any errors or messages from appearing? Like hiding "serverError" message for example.

[lubber-de]

There are callback options for the API, which you could provide via apiSettings, in particular onFailure, onError, onAbort which you could possibly use here
https://fomantic-ui.com/behaviors/api.html#/settings

But i would also try to fix that in your backend (in case you are maintaining the backend as well of course )

[ghost]

This is good for production environment. Thanks!