Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm experimenting with jQuery Autocomplete, and I'm having trouble getting it to work. The first bit of code you see below is almost an exact copy and paste from from the demo: http://jqueryui.com/autocomplete/#multiple

Here is the page in question on the dev site: http://bluepresley.com/qa/ask-a-question/

(note, the only thing different below than on the demo is the ID tag of the input, and the fact that I'm using php to output the terms)

The below code works fine, but notice how I had to keep links to jquery and jquery-ui. What's happening, however, is that other parts of the site that use autocomplete no longer work.

To remedy this, I removed the links, and I added wp_enqueue_scripts('jquery-ui-autocomplete') to my functions.php file, and I wrapped that entire block of javascript in a noconflict wrapper (please see second code block below).

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script>
  $(function() {
    var availableTags = [

        <?php
        // get terms from custom tag taxonomy
        $terms = get_terms('dwqa-question_tag');

        foreach($terms as $term){
            print "\"$term->name\", ";
        }
        ?>

//      "ActionScript",
//      "AppleScript",
//      "Asp",
//      "BASIC",
//      "C",
//      "C++",
//      "Clojure",
//      "COBOL",
//      "ColdFusion",
//      "Erlang",
//      "Fortran",
//      "Groovy",
//      "Haskell",
//      "Java",
//      "JavaScript",
//      "Lisp",
//      "Perl",
//      "PHP",
//      "Python",
//      "Ruby",
//      "Scala",
//      "Scheme"
    ];
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#tags" )
      // don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).data( "ui-autocomplete" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        minLength: 1,
        source: function( request, response ) {
          // delegate back to autocomplete, but extract the last term
          var results = $.ui.autocomplete.filter(
            availableTags, extractLast( request.term ) );

          response(results.slice(0, 10));
        },
        focus: function() {
          // prevent value inserted on focus
          return false;
        },
        select: function( event, ui ) {
          var terms = split( this.value );
          // remove the current input
          terms.pop();
          // add the selected item
          terms.push( ui.item.value );
          // add placeholder to get the comma-and-space at the end
          terms.push( "" );
          this.value = terms.join( ", " );
          return false;
        }
      });
  });
  </script>

Here is the updated code:

jQuery(document).ready(function($) {
                $(function() {
                    var availableTags = [
            <?php
            // get terms from custom tag taxonomy
            $terms = get_terms('dwqa-question_tag');
            //print "<pre>";
            //print_r($terms);
            //print "</pre>";
            foreach ($terms as $term) {
                print "\"$term->name\", ";
            }
            ?>

                        //      "ActionScript",
                        //      "AppleScript",
                        //      "Asp",
                        //      "BASIC",
                        //      "C",
                        //      "C++",
                        //      "Clojure",
                        //      "COBOL",
                        //      "ColdFusion",
                        //      "Erlang",
                        //      "Fortran",
                        //      "Groovy",
                        //      "Haskell",
                        //      "Java",
                        //      "JavaScript",
                        //      "Lisp",
                        //      "Perl",
                        //      "PHP",
                        //      "Python",
                        //      "Ruby",
                        //      "Scala",
                        //      "Scheme"
                    ];
                    function split(val) {
                        return val.split(/,\s*/);
                    }
                    function extractLast(term) {
                        return split(term).pop();
                    }

                    $("#question-tag")
                            // don't navigate away from the field on tab when selecting an item
                            .bind("keydown", function(event) {
                                if (event.keyCode === $.ui.keyCode.TAB &&
                                        $(this).data("ui-autocomplete").menu.active) {
                                    event.preventDefault();
                                }
                            })
                            .autocomplete({
                                minLength: 1,
                                source: function(request, response) {
                                    // delegate back to autocomplete, but extract the last term
                                    var results = $.ui.autocomplete.filter(
                                            availableTags, extractLast(request.term));

                                    response(results.slice(0, 10));
                                },
                                focus: function() {
                                    // prevent value inserted on focus
                                    return false;
                                },
                                select: function(event, ui) {
                                    var terms = split(this.value);
                                    // remove the current input
                                    terms.pop();
                                    // add the selected item
                                    terms.push(ui.item.value);
                                    // add placeholder to get the comma-and-space at the end
                                    terms.push("");
                                    this.value = terms.join(", ");
                                    return false;
                                }
                            });
                });

            });
            < php /*close noconflict wrapper*/ ? >
        </script>

... and here is the functions.php file addition:

function add_qa_scripts(){
  wp_enqueue_script( 'jquery-ui-autocomplete' );
}
add_action('wp_enqueue_scripts', 'add_qa_scripts');

I can see the autocomplete jquery file in my footer, autocomplete doesn't work. But, after having removed those two script links, my other autocomplete areas work (the search bar here, for example http://bluepresley.com/qa)

How can I get the code to work while not breaking the other parts of the site that are dependent on autocomplete as well?

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.