CODEWITHSUNDEEP
jquerywordpressjquery-ui
Natxo.Piq
Natxo.Piq

Reputation: 115

jQuery UI autocomplete: no mouse selection

I am developing a search-form for my website and I plan to use JQuery UI autocomplete widget to suggest values as the user types. So far, the suggestions do work.

The problem is that when users select a value from the list, the input field is not updated. The same problem seems to have been reported before, for example: Jquery UI Autocomplete doesn't allow options to be selected with mouse anymore but no solution was published.

The code is as simple as possible:

<script> 
jQuery(document).ready(function(){

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

    jQuery("#tbauthor").autocomplete({
        source: availableTags,
    });   

});
</script>
<div id="primary" class="aside main-aside sidebar">
    <form style="font-size: 10px;" name="search-news" action="." method="get">
    <table border= "0">

        <tr class="advanced"><td>Cerca per autor</td><td><input type="text" id="tbauthor" name="autor" /></td></tr>

    </table>
</form>
</div>

I am using wordpress 3.5 with Arras theme, JQuery 1.8.3 and jQuery UI 1.9.2 (already included in wordpress installation). To load the autocomplete library I call to wp_enqueue_script in header.php Here is an excerpt (header.php). My only guess is that I have a problem with the libraries loaded:

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-tabs', null, array('jquery-ui-core', 'jquery'), null, false); 
wp_enqueue_script('jquery-ui-autocomplete', null, array('jquery-ui-core', 'jquery'), null, false);

UPDATE, as the question was solved, the example is no longer a non-working example: Finally, you can see the non-working example in my site: http://www.cabanyal.com/nou/resultat/?id=1994

Thanks in advance for your help.

Upvotes: 1

Views: 1645

Answers (1)

rafiki_rafi
rafiki_rafi

Reputation: 1237

Your WordPress theme is including an obsolete version of the jQuery validator plugin which is causing a conflict with the autocomplete:

<script type='text/javascript' src='http://www.cabanyal.com/nou/wp-content/themes/arras/js/jquery.validate.min.js'></script>

I was able to replicate the issue here: jsfiddle.net/VAna6/1

Change the script to the most recent version and the autocomplete should work as presented here: http://jsfiddle.net/VAna6/2/.

Upvotes: 1

Related Questions