Autocomplete for dynamically created input using jQuery 3.2.1

Question

I have found autocomplete for dynamically created inputs using jQuery 1.9.1, but I'm using jQuery 3.2.1 (am unable to change the version), kindly give me the solution for jQuery 3.2.1!

The example below is working fine in jQuery 1.9.1:

<script>
 var availableTags = {
     source: ["ActionScript", "AppleScript"],
     minLength: 2
 };
 $("#myProd0").autocomplete({
  source:availableTags
});
  </script>

<html>
<input type="text" name="myProd0" id="productname">
</html>

If I run the code above in jquery 3.2.1, it says autocomplete is not a function.

Check this: http://jsfiddle.net/6mtYe/ (changing to jQuery v3.1.2 won't work)

Already tried to google this? – Gilles Heinesch Aug 18 '18 at 10:21 — Gilles Heinesch, Aug 18 '18 at 10:21
yes tried more than an hour. couldn't find out the solution – RenceAbi Aug 18 '18 at 10:22 — RenceAbi, Aug 18 '18 at 10:22
Atleast give us what you tried. A simple code or something – keysl Aug 18 '18 at 10:23 — keysl, Aug 18 '18 at 10:23

score 1 · Answer 1 · answered Aug 18 '18 at 10:58

1

I think JQuery UI is what you need, check this:

https://jqueryui.com/autocomplete/

If you click on "View source", you'll see an example with jquery version 1.12.4, but if you replace this line:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

for this line:

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

It still works.

answered Aug 18 '18 at 10:58

varo90

56
1
9

sorry im getting Uncaught TypeError: $(...).autocomplete is not a function – RenceAbi Aug 18 '18 at 11:20
Hmmm... I don't get any errors... What other JS files are you including? Pherhaps one of them is conflicting with your JQuery files, check this: https://stackoverflow.com/questions/19591155/autocomplete-is-not-a-function-error If so, I would recommend to just copy and paste the code of the page I posted and then add your other JS files one by one until it fails, so you can tell which one is creating the conflict. – varo90 Aug 18 '18 at 11:32

score 0 · Answer 2 · answered Aug 18 '18 at 11:31

use jquery ui

<script type="text/javascript" src="external/jquery/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="external/jquery-ui/js/jquery-ui-1.12.1.min.js"></script>
<script>
  var availableTags = {
     source: ["ActionScript", "AppleScript"],
     minLength: 2
  };
  $("#myProd0").autocomplete({
   source:availableTags
  });
</script>

check link

Autocomplete for dynamically created input using jQuery 3.2.1

2 Answers2