Question

I am writing an autocomplete form with multiple types of data.

In the HTML, data types are separated by using the key attribute:

<input type="text" name="data0" value="" size="20" id="data0" key="country"/>
<input type="text" name="data1" value="" size="20" id="data1" key="state"/>

In the js file, I run a wildcard selector on input and use the autocomplete this way:

$(function() {
$(":input").autocomplete({
    source: "query.php?type="+$(this).attr("key")+"&mode=1",
    minLength: 2
});
});

But it does not work.

I wondered if it is due to the .attr() selector, so I wrote another code to test it:

var test="state";
$(function() {
$(":input").autocomplete({
    source: "query.php?type="+test+"&mode=1",
    minLength: 2
});
});

does not work either.

Thank you in advance for the help!

edit:

$(function() {
$(":input").autocomplete({
    source: "query.php?type=state&mode=1",
    minLength: 2
});
});

this will work. So I am sure it is not a selector problem.

Answer 1

$(function() {
$(":input").autocomplete({
    source: "query.php?type="+$(this).attr("key")+"&mode=1",
    minLength: 2
});
});

Will not work because this doesn’t point to what you think it does. You could do something like this…

$(":input").each(function() {
   $(this).autocomplete({
    source: "query.php?type="+encodeURIComponent($(this).attr("key"))+"&mode=1",
    minLength: 2
   });
});

You also ought to encode the parameter above, as I have done for you.