jQuery UI autocomplete with different inputs

Question

I want to add different autocompletes for different inputs. For example I have the following two input fields:

<input type="text" id="firstname" name="firstname" placeholder="Max" required />
<input type="text" id="lastname" name="lastname" placeholder="Mustermann" required />

So I currently add different autocompletes as follows:

$( document ).ready(function() {
    $( '#firstname' ).autocomplete({
        source: 'autocomplete_firstname.php',
        minLength: 1
    });
    $( '#lastname' ).autocomplete({
        source: 'autocomplete_lastname.php',
        minLength: 1
    });
});

That works fine for me, but maybe is there a better way like a parameter? So that I can use only one class on autocomplete fields and only one .php-file which return the same result?

vaneayoung · Accepted Answer · 2015-02-27T23:34:26.740

0

try this:

$( document ).ready(function() {
var focused_inp;

    $( '#firstname,#lastname' ).on('focus',function(){ focused_inp = $(this).prop('name');}).autocomplete({
        source: function(req, res){
      $.ajax({
      url: "autocomplete.php",
      dataType: "jsonp",
      data: {action: focused_inp, data: request.term  },
      success: function(result) { res(result)  }
    }) },
        minLength: 1,

    });

});

edited Feb 27 '15 at 23:34

answered Feb 25 '15 at 22:34

vaneayoung

353
1
4
22

that works, but can you tell me why **source: 'autocomplete.php?action='+$(this).prop('name'),** not working, but **source: 'autocomplete.php?action=firstname',** works? – Fox Feb 26 '15 at 17:34
is the result function required? – Fox Feb 27 '15 at 21:53
hm can't follow ... where come the data from for this result? my php-File echoing the following: **echo json_encode( $output );** and this looks like ["Maria","Martin",...] – Fox Feb 27 '15 at 22:20
ok, but I am getting an error now, for example I am typing a "m" then chrome say the requested url is now: autocomplete.php?action=firstname&term%5Bterm%5D=m but it have to look like: autocomplete.php?action=firstname&term=m – Fox Feb 27 '15 at 22:47
try to change data: req with data:decodeURIComponent(req) or change request as post. – vaneayoung Feb 27 '15 at 22:53
hm both not working, if I try to decode this uri the result looks weird: **autocomplete.php?action=firstname&data=function+()%7Breturn+a.apply(b%7C%7Cthis%2Cc.concat(d.call(arguments)))%7D** and changing get to post and updating my php-File to handle post instead of get not working too – Fox Feb 27 '15 at 23:03
hm the request uri and the response looking great :), but I get no autocomplete dropdown now – Fox Feb 27 '15 at 23:21
thanks for your patience it is working now! :) ... but there is a "p" to much in your post, dataType: "json" – Fox Feb 28 '15 at 08:42
documentation about jsonp -->> http://stackoverflow.com/questions/2887209/what-are-the-differences-between-json-and-jsonp – vaneayoung Feb 28 '15 at 08:46
ahh ok sry, then ignore the last part of my last comment – Fox Feb 28 '15 at 08:57

score 0 · Answer 2 · answered Feb 26 '15 at 13:09

If you want to decouple your autocomplete instantiation code from the input markup, you can set your autocomplete source as a data attribute.

<input type="text" data-source="foo.php"/>
<input type="text" data-source="bar.php"/>

Then, in the create event, you can look for this attribute and set it as the source. This code is now applicable in many places, since you don't have to pass the source option directly when the widget is being created:

$('input').autocomplete({
    minLength: 1,
    create: function() {
        var $this = $(this),
            source = $this.data('source');
        if (source) {
            $this.autocomplete('option', 'source', source);
        }
    }
});

$('input').first().autocomplete('option', 'source');
// → 'foo.php'

$('input').last().autocomplete('option', 'source');
// → 'bar.php'

jQuery UI autocomplete with different inputs

2 Answers2