Selectize - jQuery search/select element parsing json from ajax call

Я использую пример выбора GitHub, который я изменил, чтобы получить json с моего собственного сервера.Selectize - jQuery search/select element parsing json from ajax call

http://brianreavis.github.io/selectize.js/

В этом примере я пропустил вызов дб, и я просто принуждая назад некоторые установочные данные. Поле выбора не заполняется json, который возвращается скриптом php, и я не могу понять, почему.

JSON ответ:

$result['users'] = array(
    array(
     'id'=>1, 
     'first_name'=>"Sherd", 
     'last_name'=>"Jerrod", 
     'email'=>"[email protected]" 
    ), 
    array(
     'id'=>2, 
     'first_name'=>"Ned", 
     'last_name'=>"Wolf", 
     'email'=>"[email protected]" 
    ), 
); 

$json = json_encode($result, JSON_PRETTY_PRINT); 
echo $json;

Выберите окно:

<!DOCTYPE html> 
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> 
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> 
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]--> 
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <title>Selectize.js Demo</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 
     <link rel="stylesheet" href="css/normalize.css"> 
     <link rel="stylesheet" href="css/stylesheet.css"> 
     <!--[if IE 8]><script src="js/es5.js"></script><![endif]--> 
     <script src="js/jquery.js"></script> 
     <script src="../dist/js/standalone/selectize.js"></script> 
     <script src="js/index.js"></script> 

    </head> 
    <body> 
     <div id="wrapper"> 
      <h1>Selectize.js</h1> 
      <div class="demo"> 
       <h2>Loading + Custom Scoring</h2> 
       <p>This demo shows how to integrate third-party data and override the scoring method.</p> 
       <div class="control-group"> 
        <label for="select-repo">Repository:</label> 
        <select id="select-repo" class="repositories" placeholder="Pick a repository..."></select> 
       </div> 
       <script> 
       $('#select-repo').selectize({ 
        valueField: 'url', 
        labelField: 'name', 
        searchField: 'name', 
        options: [], 
        create: false, 
        render: { 
         option: function(item, escape) { 
          return '<div>'+ item.first_name +'</div>'; 
         } 
        }, 
        score: function(search) { 
         var score = this.getScoreFunction(search); 
         return function(item) { 
          return score(item) * (1 + Math.min(item.watchers/100, 1)); 
         }; 
        }, 
        load: function(query, callback) { 
         if (!query.length) return callback(); 
         $.ajax({ 
          url: 'http://localhost/random/return.php?q=' + encodeURIComponent(query), 

          type: 'GET', 
          dataType: 'json', 
          error: function() { 
           callback(); 
          }, 
          success: function(res) { 
           callback(res.users); 
          } 
         }); 
        } 
       }); 
       </script> 
      </div> 
     </div> 
    </body> 
</html>

источник

2015-06-09 Max Sangster

Из API, я предполагаю, что selectize использует array в качестве источника. Но то, что вы получаете, - ответ JSON. Попробуйте преобразовать его в array и попробовать

Вы можете отобразить массив на массив объектов, например:

var results= $.parseJSON(your_JSON_response); 
var items = results.map(function(x) { return { item: x }; });

Затем вы можете использовать «labelField» и «valueField», чтобы указать значение:

источник

2015-06-09 09:08:28 Abhinav

Нет, вы не можете возвратить массив coz, это массив php, вы не можете использовать php-массив в javascript и, следовательно, json :) – Abhinav

Вот что я подумал. Также пример выбора, который использовал github api, возвращает json и все работает отлично, я не понимаю, зачем нужно сопоставлять json в массив js? –

Selectize - jQuery search/select element parsing json from ajax call

ответ

Смежные вопросы