{"id":7800,"date":"2015-10-27T09:07:18","date_gmt":"2015-10-27T09:07:18","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/10\/27\/jquery-chosen-plugin-dynamically-populate-list-by-ajax-open-source-projects-harvesthq-chosen\/"},"modified":"2015-10-27T09:07:18","modified_gmt":"2015-10-27T09:07:18","slug":"jquery-chosen-plugin-dynamically-populate-list-by-ajax-open-source-projects-harvesthq-chosen","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/10\/27\/jquery-chosen-plugin-dynamically-populate-list-by-ajax-open-source-projects-harvesthq-chosen\/","title":{"rendered":"Jquery Chosen plugin – dynamically populate list by Ajax-open source projects harvesthq\/chosen"},"content":{"rendered":"

Im trying to build my dropdown menu using the plugin Chosen for Multiple Select<\/strong> . Here’s to behavior I’m based on:<\/p>\n

http:\/\/jsfiddle.net\/JfLvA\/<\/p>\n

So, instead of having 3 harcoded < option > in my select. I want this list to be the values of a json array populated by an ajax request. This will be triggered by autocomplete.<\/p>\n

So, if the user type “car”, im sending the letter via an ajax call, and im getting back an array like that:<\/p>\n

[{“id”:”2489″,”name”:”carrie”},{“id”:”2490″,”name”:”Caroline”},{“id”:”2491″,”name”:”Carole”}]<\/p>\n

The code:<\/p>\n

$(function() {\n\n$(\".chzn-select\").chosen();\n$(\".chzn-select-deselect\").chosen({allow_single_deselect:true});\n\n$('.chzn-choices input').autocomplete({\n   source: function( request, response ) {\n      $.ajax({\n          url: \"\/change\/name\/autocomplete\/\"+request.term+\"\/\",\n          dataType: \"json\",\n          success: function( data ) {\n             response( $.map( data, function( item ) {\n                $('ul.chzn-results').append('<\/code><\/pre>\n
  • ' + item.name + '<\/code><\/li>\n
    ');\n\n          }\n       });\n    }\n});\n<\/pre>\n
    Result:<\/code><\/p>\n
    I type \"car\", in the dropdown Im getting \"No result for car\" and then I have all my results, as I want.<\/code><\/p>\n
    1. Why I'm I getting the \"No result\" message, cause I can see in my json array and inside my list that I'm getting results.<\/strong><\/code><\/p>\n
     -----------------------------\n<\/code><\/code><\/pre>\n
    When I delete “car” and enter “sam”. The results for “sam” are showing after the “car” results. (Basically, I see the result for both, instead of just having the result of my current search)<\/p>\n
    2. Im I suppose to clear the ul on keyUp?? Thought the plugin was doing that already<\/strong><\/p>\n
     -----------------------------\n<\/code><\/pre>\n
    When I click on a name to actually select it and add it into the select, Im getting a javascript error inside the chosen.js file<\/p>\n
    item is undefined
    \n“item.selected = true;” line 732<\/p>\n
    the link to the plugin: http:\/\/harvesthq.github.com\/chosen\/chosen\/chosen.jquery.js<\/p>\n
    and it’s not adding anything inside the select.<\/p>\n
    3. No idea why this is happening<\/strong><\/p>\n
     -----------------------------\n<\/code><\/pre>\n
    Do you guys have any idea on what I’m I doing something wrong? I’m completly stuck here…!<\/p>\n
    Oh and by the way, I dont mind changing the plugin source, as it’s the only place where I’m using it….<\/p>\n","protected":false},"excerpt":{"rendered":"
    Im trying to build my dropdown menu using the plugin Chosen for Multiple Select . Here’s to behavior I’m based on: http:\/\/jsfiddle.net\/JfLvA\/ So, instead of having 3 harcoded < option > in my select. I want this list to be the values of a json array populated by an ajax request. This will be triggered […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7800","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7800","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7800"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7800\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}