CODEWITHSUNDEEP
javascriptselectize.js
niceman
niceman

Reputation: 2673

selectize.js doesn't work with remote url

I'm using selectize like this: 

$('#category_field').selectize({           
       valueField: 'name',             
       searchField: 'name',
       delimiter: "/",           
       options: [],
       load: function(query,callback)
       {    
           if(!query.length) return callback();          
           $.ajax({
               url: '/categories/autocomplete',
               type: 'GET',
               dataType: 'jsonp',
               data: {                                    
               },
               error: function() {
                   callback();
               },
               success: function(res) {
                   callback(res.movies);
               } 
           });              
       }           
   }

);

"#category_field" is just a form input of type text.

I verified that the ajax request is being made and the response from the server looks like this: 

[
  {
    "_id": {
      "$oid": "568bee09421aa908fe000009"
    },
    "depth": 0,
    "name": "math",
    "parent_id": null,
    "parent_ids": [],
    "picture": {
      "url": "/uploads/category/picture/568bee09421aa908fe000009/Screenshot________________.png",
      "thumb": {
        "url": "/uploads/category/picture/568bee09421aa908fe000009/thumb_Screenshot________________.png"
      }
    }
  }
]

My problem is that the autocomplete dropdown menu doesn't even show, what to do ?

Edit

I just wanted to mention that I'm using bootstrap 3 , the input field and the label for it are wrapped inside <div class=field>...</div>, this div is wrapped inside the form which is wrapped inside container inside panel.

Does this relate to the problem ?

Upvotes: 0

Views: 751

Answers (2)

krishnakumar sekar
krishnakumar sekar

Reputation: 663

What i noticed

  1. You are not passing any query to the service

  2. You have to set preLoad true to load the options or have to set preLoad in focus to set the options initially

    or

  3. You have to initialize the option with the array as like your response

Upvotes: 0

AHOYAHOY
AHOYAHOY

Reputation: 1847

This response not looks like a valid JSON. Check console, or/and use trycatch

try { $.ajax(...) } catch (err) { console.error(err); }

And JSONP is crossDomain method, maybe you can try delete it.

Upvotes: 0

Related Questions