CODEWITHSUNDEEP
jqueryjquery-ui-autocomplete
egar
egar

Reputation: 51

jQuery .change() event not working on mobile with autocomplete

I am using ui-autocomplete in a text box. Once they select an autocomplete drop down and leave that text box it auto populates all other text fields. All of this works on a pc, but does not work on a mobile webpage. I've come to find out it has something to do with the ui-autocomplete plugin, it won't let the mobile browser pick up the change event.

I've looking over similar cases but can't seem to resolve the issue. I'm very new to jQuery

If I un-comment the last plugin, the change event will be picked up but the auto-fill will not work.

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">

Text box:

<tr><td>Part Name: </td><td><input type="text" name="PartNum" class="auto" id="pn" style="width:250px" required></td></tr>

    <script type="text/javascript">
        $(function() {
                $(".auto").autocomplete({
                    source: "autocomplete.php",
                minLength: 1
            });
        });
    </script>

Change event

$('#pn').change(function(e) {
        e.preventDefault();
        myrequest();
    });

Again, this works on pc fine but wont work on mobile. Any help is appreciated.

Upvotes: 0

Views: 1158

Answers (1)

Nawed Khan
Nawed Khan

Reputation: 4401

The JQueryUI Autocomplete has a select() event that is triggered when an item is selected. It is better to use that because .change() first of all works when user focuses out on the element, secondly when autocomplete is created on an input field the field itself is replaced (and is hidden).

This is how you would implement the select() event:

$(function() {
   $(".auto").autocomplete({
      source: "autocomplete.php",
      minLength: 1,
      select: function( event, ui ) { myrequest(); }
   });
});

You do not need a preventdefault here. you can add more code within the function braces.

Upvotes: 1

Related Questions