MultiAutoComplete Tab Removes the field which is searched

MultiAutoComplete Tab Removes the field which is searched

Posted by: pmithilesh on 27 October 2022, 9:40 pm EST

• 

  pmithilesh

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 October 2022, 9:40 pm EST - Updated 27 October 2022, 9:47 pm EST

  Hi ,
  
  I was trying to use MultiAutoComplete

  https://www.grapecity.com/wijmo/demos/Input/MultiAutoComplete/Overview/angular

  1)We have requirement when you search and got the results. Tab Key press should go out of the field and keep the text which is searched but currently it is clearing the whole text and focus is still inside the control.
  
  2)how to capture enter event on this control we want to call external API based on the text on Enter Key Press
  
  please let me know if there is any solution.
  
  please find attached images for tab issue

  appreciate help
  
  Thanks
  
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 1 November 2022, 4:58 am EST

  Hi,

  To achieve both of the functionality, you may handle the keydown event on the AutoComplete’s hostElement. Please refer to the following code snippet and the sample demonstrating the same:

  [code]autocomplete.hostElement.addEventListener(
  
  “keydown”,
  
  (e) => {
  
  // tab key
  
  if (e.keyCode === 9) {
  
  if (autocomplete.isDroppedDown) {
  
  autocomplete.isDroppedDown = false;
  
  }
  
  const text = autocomplete.text;
  
  setTimeout(() => {
  
  autocomplete.text = text;
  
  console.log(text);
  
  });
  
  }

      // enter key
      if (e.keyCode === 13) {
        console.log("Enter key is pressed");
        // call e.preventDefuult() to prevent default functionality
      }
    },
    true
  );[/code]
  

  https://codesandbox.io/s/wijmo-angular-forked-133r66?file=/src/app/app.component.ts

  ~sharad

• 

  pmithilesh

  • Post Options:
  • Link
    Copy

  Posted 1 November 2022, 11:45 am EST

  Thank you Sharad Enter key solution worked will check on tab