Do not update value in text area when navigating dropdown box through arrow keys in Jquery Autocomplete

0
votes

I am currently working with jQuery Autocomplete and as the question describes, I do not want to update my value in text area which I selects through arrow keys in dropdown.

For eg. In my text area, when I type 'user1', suggestions will be filtered in the dropdown and results occur. When I try to navigate through different results in dropdown, the value which I typed gets updated with the value I navigate through arrow keys.

enter image description here enter image description here

As you can see, first I type a word 'bala' (image on left side) and when I try to navigate through list, my text area input value gets updated with the value which I navigated in dropdown box as '[email protected]' (image on righ side). I dont want that value to get updated. It should be only updated when I click 'Enter' key or select using mouse.

I just want to show the results and do not update the value I given when navigating through different items. Answers are highly appreciated.

1
javascriptjqueryautocomplete
Could you please paste your code – Krishna
add some codes or code pen or something so we can understand your issue – Milind
I have update my question now. – Balasubramani M

1 Answers

1
votes

I think this is what you looking for:-

Example Fiddle

$(function() {
   var availableTags = [
     "ActionScript",
     "AppleScript",
     "Asp",
     "BASIC",
     "C",
     "C++",
     "Clojure",
     "COBOL",
     "ColdFusion",
     "Erlang",
     "Fortran",
     "Groovy",
     "Haskell",
     "Java",
     "JavaScript",
     "Lisp",
     "Perl",
     "PHP",
     "Python",
     "Ruby",
     "Scala",
     "Scheme"
   ];

   // don't navigate away from the field on tab when selecting an item

   $("#tags").autocomplete({
     source: availableTags,
     focus: function() {
       // prevent value inserted on focus
       // **This is where you should add**
       return false;
     },
   });
 });

You can find the example from Jquery:- jQuery Autocomplete multiple-remote

Check the function on focus.