jQuery UI自动完成未显示建议

Question

I am using the following code to dynamically create an INPUT element and assign auto complete features to it. There is some problem with the .autocomplete line because the next line which adds the element to td never gets executed.

var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];

var fileCodeAutoComplete = $("<input/>");

$(fileCodeAutoComplete).autocomplete({
    source: availableTags
}); 

$(td).append(fileCodeAutoComplete);

Any ideas?

UPDATE 1:

I placed a try-catch around the autocomplete call and found the error to be:

"object does not support this property or method".

This is weird because I have added the jquery-ui reference to the page.

UPDATE 2:

I updated the code to follows and still receive the "object does not support this property or method".

var fileCodeAutoComplete = $("<input/>");
    $(fileCodeAutoComplete).attr("id", "fileCodeAutoComplete"); 

    try {
        $("input#fileCodeAutoComplete").autocomplete({
            source: availableTags
        });
    }
    catch(ex) {
        alert(ex.message); 
    }

    $(td).append(fileCodeAutoComplete);

UPDATE 3: I made a new project and copy pasted the code and it worked but on the existing project it does not seems to be working. I think it might be the Microsoft Library is getting in the way.

UPDATE 4: SOLUTION

The problem was that someone else was referring to an older version of jQuery which was messing with the jQuery UI framework.

Answer 1

var fileCodeAutoComplete = $("<input/>");

try giving in a selector rahter than a tag, like for example

<input id="autocomplete" />

then you give

$("input#autocomplete").autocomplete({
source: availableTags
});

you can refer the link

Answer 2

have you tried adding attributes to the input tag? something like:

var fileCodeAutoComplete = $("<input type='text' />");

Also, how about trying the autocomplete on a known input element to see if the autocomplete functionality is breaking it, or if it's the dynamic input field you're adding the functionality to?

Answer 3

When you declare:

var fileCodeAutoComplete = $("<input/>");

It's already a jquery object, you don't have to wrap it in $() again. you can also chain the creation of the input and the autocomplete:

var fileCodeAutoComplete = $("<input/>")
    .autocomplete({
        source: availableTags
    })
    .appendTo(td);

Answer 4

Your solution works for me:

http://jsfiddle.net/L8yvb/

Answer 5

Works for me in JS Fiddle: http://jsfiddle.net/bH9ab/1/

I used your original code nearly verbatim (other than mocking a table cell to append the input).

To validate that the reference to jQuery UI is correct (and that it isn't corrupt, truncated, etc. on your local machine), you can point to Google's CDN:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js