jquery autocomplete not getting textbox atttribute

Question

where $(this).attr('action') is undefined i have more then one textbox how can i get attribute and pass it with url in autocomplete

javascript

 $( ".autocomplete" ).autocomplete({
    source: "<?php echo site_url('list')?>/"+$(this).attr('action'),
    minLength: 2,
    select: function( event, ui ) {
    log( ui.item ?
    "Selected: " + ui.item.value + " aka " + ui.item.id :
    "Nothing selected, input was " + this.value );
    }

Html

<div class="row">
    <div class="form-group col-sm-5">
        <label>Clent Meeting Point</label>
        <input class="form-control autocomplete" action="client_meeting_point" id="ClientMeetingPoint" name="ClientMeetingPoint" value="<?php echo set_value('ClientMeetingPoint');?>" placeholder="east ave">
    </div>
    <div class="form-group col-sm-5">
        <label>Guide Meeting Point</label>
        <input class="form-control autocomplete" action="guide_meeting_point" id="GuideMeetingPoint" name="GuideMeetingPoint" value="<?php echo set_value('GuideMeetingPoint');?>" placeholder="etc...">
    </div>
    <div class="form-group col-sm-2">
        <label>Diparture Time</label>
        <input class="form-control timepicker " id="DepartureTime" name="DepartureTime" value="<?php echo set_value('GuideMeetingPoint');?>" placeholder="etc...">
    </div>
</div>

score 1 · Answer 1 · edited May 23 '17 at 11:56

The problem is that where you use $(this).attr('action'), $(this) does not actually refer to the element that the widget is bound to.

To get and use a reference to the element the widget is bound to, try this:

  $(function () {
    $(".autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: this.element.data('action'), // <-- this.element is the input the widget is bound to and is already a jQuery wrapped object
                dataType: 'json',
                data: {
                    term: request.term
                },
                success: function (data) {
                    response(data);
                }
            });
        },
        minLength: 2,
        select: function (event, ui) {
            log(ui.item ?
                "Selected: " + ui.item.value + " aka " + ui.item.id :
                "Nothing selected, input was " + this.value);
        }
    });
  });

Here is a demo showing how this would work.

Note that your sever-side script will need to filter the available values and return matches (which my example doesnt do):

From the docs:

String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.

That aside, I would use data attributes on the elements rather than custom attributes like you have

See Why should I prepend my custom attributes with "data-"?

jquery autocomplete not getting textbox atttribute

1 Answers1

That aside, I would use data attributes on the elements rather than custom attributes like you have