2

我们正在尝试将 xml 与 ivaynberg 在http://ivaynberg.github.io/select2提供的 select2 一起使用。

我们正在使用以下代码来获取 xml 数据

$('#selectbox').select2({
minimumInputLength: 1,
ajax: {
    url: 'test.xml',
  dataType: 'xml',
  data: function (term, page) {
    return {
      q: term
    };
  },
  results: function (data, page) {
      return { results: data.CATALOG };
  }
}});

以下是XML数据

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
    <id>1</id>
    <text>Bob Dylan</text>
</CD>
<CD>
    <id>1</id>
    <text>Bonnie Tyler</text>
</CD>
</CATALOG>

我不知道是什么错误，Select2 没有加载任何数据。

有人请帮助我们。

4

2 回答 2

1

您需要results为 ajax 选项提供一个函数，该函数返回一个对象数组，其中每个对象具有id和text属性。

以下是一种可行的方法。它用 jQuery 对象包装返回的 XML，然后使用 jQuery 方法处理 XML。您还可以使用本机 DOM 方法来处理 XML。

$('#selectbox').select2({
    minimumInputLength: 1,
    ajax: {
        url: 'test.xml',
        dataType: 'xml',
        data: function(term, page) { return { q: term }; },
        results: function(data) {
            return {
                results: $(data).children('CATALOG').children('CD').map(function() {
                    var $cd = $(this);
                    return {
                        id: $cd.children('id').text(),
                        text: $cd.children('text').text()
                    };
                })
            };
        }
    }
});

jsfiddle

注意：您将希望每个项目都具有唯一的id值。在您的示例 XML 中，这两个<cd>元素都具有 value 1。

于 2014-12-19T19:47:13.580 回答
0

有一些事情应该遵循：

首先，您的选择框控件应该是一个 div

其次，当你使用ajax选项时，你应该实现formatResult选项和formatSelection选项。

以下是我的代码：

  $(document).ready(function () {
          $('#userbox').select2({
              minimumInputLength: 1,
              ajax: {
                  url: 'test.xml',
                  dataType: 'xml',
                  data: function (term, page) {
                      return {
                          q: term
                      };
                  },
                  results: function (data, page) {
                      return { results:$(data).find("text") };
                  }
              },
              formatResult: movieFormatResult,
              formatSelection: movieFormatSelection
          });
      });

      function movieFormatResult(item,container,query) {

          if ($(item).text().indexOf(query.term) > -1) {
              return item;
          } 

      }


      function movieFormatSelection(item) {
          return $(item).text();
      }



 <form id="form1" runat="server">
<div>
 <div id="userbox" style="width:300px"></div>
</div>
</form>
于 2014-07-23T03:16:16.507 回答