Scenario:

I'm using Materializecss autoplete, when i select an item from the autoplete box, an onchange event should be triggered.

Code:

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="autoplete-input" class="autoplete" onchange="sendItem(this.value)">
        <label for="autoplete-input">Autoplete</label>
      </div>
    </div>
  </div>
</div>
<script>
$('input.autoplete').autoplete({
  data: {
    "Apple": null,
    "Microsoft": null,
    "Google": ''
  },
  limit: 20, 
});
  function sendItem(val) {
    console.log(val);
  }
</script>

Issue:

When i type "AP" and selects "APPLE" from the autoplete, i need one onchange event to be triggered passing the value "APPLE" but the above program triggers onchange event twice, one passing "AP" and the next passing "APPLE". How can i trigger the latter event. Any advice would be helpful. Thank you.

here is a working jsfiddle program.

Scenario:

I'm using Materializecss autoplete, when i select an item from the autoplete box, an onchange event should be triggered.

Code:

<div class="row">
  <div class="col s12">
    <div class="row">
      <div class="input-field col s12">
        <input type="text" id="autoplete-input" class="autoplete" onchange="sendItem(this.value)">
        <label for="autoplete-input">Autoplete</label>
      </div>
    </div>
  </div>
</div>
<script>
$('input.autoplete').autoplete({
  data: {
    "Apple": null,
    "Microsoft": null,
    "Google": 'http://placehold.it/250x250'
  },
  limit: 20, 
});
  function sendItem(val) {
    console.log(val);
  }
</script>

Issue:

When i type "AP" and selects "APPLE" from the autoplete, i need one onchange event to be triggered passing the value "APPLE" but the above program triggers onchange event twice, one passing "AP" and the next passing "APPLE". How can i trigger the latter event. Any advice would be helpful. Thank you.

here is a working jsfiddle program.

• javascript
• jquery
• autoplete
• materialize

Share Improve this question Follow asked Mar 15, 2017 at 12:11 Ranjith VaratharajanRanjith Varatharajan 1,69244 gold badges3636 silver badges8181 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5 +50

When i type "AP" and selects "APPLE" from the autoplete, i need one onchange event to be triggered passing the value "APPLE" but the above program triggers onchange event twice, one passing "AP" and the next passing "APPLE".

That happens because when you click/select a materialize autoplete element two actions are performed:

• trigger change event on input field
• execute the onAutoplete callback

But, your onchange inline event handler is executed the first time because you move on the drop down list after pressing AP and after on the autoplete list element APPLE.

The involved materialize source code is:

// Set input value
$autoplete.on('click', 'li', function () {
  var text = $(this).text().trim();
  $input.val(text);
  $input.trigger('change');   // your issue.......
  $autoplete.empty();
  resetCurrentElement();

  // Handle onAutoplete callback.
  if (typeof(options.onAutoplete) === "function") {
    options.onAutoplete.call(this, text);
  }
});

In order to solve your issue you need to:

• remove the inline onchange="sendItem(this.value)"

• add the following callback to your autoplete:

  onAutoplete: function(txt) {

  sendItem(txt);
  

  },

In the following the snippet (or fiddle) using this approach:

function sendItem(val) {
    console.log(val);
}

$(function () {
    $('input.autoplete').autoplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        onAutoplete: function(txt) {
          sendItem(txt);
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });

});

<script src="https://code.jquery./jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autoplete-input" class="autoplete">
                <label for="autoplete-input">Autoplete</label>
            </div>
        </div>
    </div>
</div>

A different approach can be based on the isTrigger property of event object in jQuery. Right because the second onchange event is triggered from jQuery you can test against this value:

function sendItem(val, e) {
    if (e.isTrigger != undefined) {
        console.log(val);
    }
}

That means you must add the event parameter to the inline function:

onchange="sendItem(this.value, event)"

The snippet:

function sendItem(ele, e) {
    if (e.isTrigger != undefined) {
        console.log(ele.value + '   url if any: ' + $(ele).nextAll('.dropdown-content').find('img').attr('src'));
    }
}

$(function () {
    $('input.autoplete').autoplete({
        data: {
            "Apple": null,
            "Microsoft": null,
            "Google": 'http://placehold.it/250x250'
        },
        limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
    });
});

<script src="https://code.jquery./jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare./ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>


<div class="row">
    <div class="col s12">
        <div class="row">
            <div class="input-field col s12">
                <input type="text" id="autoplete-input" class="autoplete" onchange="sendItem(this, event)">
                <label for="autoplete-input">Autoplete</label>
            </div>
        </div>
    </div>
</div>