0

I am using JQuery autocomplete to send a json request to my cakephp application, the javascript code is from http://jqueryui.com/autocomplete/

  $(function() {
    function split( val ) {
      return val.split( /,\s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

    $( "#tag-string" )
  // don't navigate away from the field on tab when selecting an item
      .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
            $( this ).autocomplete( "instance" ).menu.active ) {
          event.preventDefault();
        }
      })
      .autocomplete({
        source:function(request, response){ 
          $.getJSON("/articles/getTags/" + request.term + ".json", {
            term : extractLast(request.term)
          }, response);
       },
        search: function() {
          // custom minLength
          var term = extractLast( this.value );
          if ( term.length < 1 ) {
            return false;
          }
        },
        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;
        }
      });
  });(jQuery);

if i run the XMLHttpRequests on the chrome js console (where "c" is the term to search for)

$.getJSON("/articles/getTags/c.json")

i get this response text:

responseText: "{↵ "tags": [↵ {↵ "tag": "Calles"↵ },↵ {↵ "tag": "Circulacion"↵ },↵ {↵ "tag": "cognicion"↵ },↵ {↵ "tag": "Creatividad"↵ }↵ ]↵}"

but the input field does not populate with this values. This is what i get (i've uploaded an image because is the easiest way to explaint it) on the "Tag String" input field screen

4
  • The screenshot you shared, I see something is appending to your input field, may by the results, but are not visible due to CSS issue maybe. Try inspecting the input field.
    – MotsManish
    Sep 1, 2015 at 7:15
  • thanks @MotsManish, nothing strange found on the input field or the css style sheet. Will keep trying Sep 2, 2015 at 14:41
  • Please write an answer and accept it, don't edit the question to say "solved".
    – AD7six
    Oct 13, 2015 at 9:06
  • @RaulMagdalenaCatala cool, but please make the answer meaningful. The response your code generated isn't in the question (unless it's that responseText thing - format it to the actual response if so), the variable you've used in the answer isn't in the question. Thanks for actioning my firs comment.
    – AD7six
    Oct 13, 2015 at 9:26

1 Answer 1

0

finally solved. the json response send to jquery autocomplete must be formated with "value" and "label".

var ac = [
{
    label: "One Thing",
    value: "One-Thing"
},
{
    label: "Two Thing",
    value: "Two-Thing"
},      

]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.