如何将外部 json 数据添加到 jQueryUI MultiSearch

Question

根据jqueryUI MultiSearch。我在从外部链接导入 json 数据时遇到问题。这些示例仅在本地数据中演示。在给出的例子中。有很多行样本数据。我需要用 ajax json 源替换这些行。

这是示例 json 数据：

localData = [
         {"display_name": "Neal, Amelia R.","organization":"XYZ Company","primary_email":"pede@nibh.com","primary_phone":"(577) 324-9152"},
         {"display_name": "Cervantes, Colton Z.","organization":"XYZ Company","primary_email":"imperdiet.dictum.magna@SuspendissesagittisNullam.com","primary_phone":"(730) 491-0518"},
         {"display_name": "Thornton, Marvin H.","organization":"XYZ Company","primary_email":"tristique@in.ca","primary_phone":"(530) 962-1617"},
         {"display_name": "Watkins, Leilani C.","organization":"XYZ Company","primary_email":"amet.massa@a.edu","primary_phone":"(368) 554-4860"}];

嗯，如您所见。我需要用这样的东西来代替这些行：

$('input').multisearch({ajax: "test.json"});
or
$.getJSON( "test.json");

请提出建议。

Answer 1

你可以使用ajaxOptions，插件已经提供了选项。

Reference，强调我的

ajaxOptions：在远程资源的 $.ajax 调用中使用的选项哈希。 仅在 source 是表示资源路径的字符串时使用。当前接受对 dataType 和方法选项的覆盖。

例子

$('input').multisearch({
    source: "test.json",
    ajaxOptions: {
        searchTerm: 'term', //Your querystring parameter
        dataType: 'json',
        method: 'GET'
    }
});

来自Plugin Source Code

     if ( typeof( opt.source ) == 'string' ) {

        opt.ajaxOptions =
           opt.ajaxOptions || {
              searchTerm: 'term',
              dataType: 'json',
              method: 'GET'
           };

        this._remoteSearch = _.throttle( function() {

              if ( self.localCache[self.search_text] ) {
                 cb( self.search_text, self.localCache[self.search_text] );
              } else {

                 if ( self._xhr )
                    self._xhr.abort();

                 self._xhr =
                    $.ajax({
                       url: opt.source,
                       data: opt.ajaxOptions.searchTerm+'='+self.search_text,
                       dataType: opt.ajaxOptions.dataType,
                       method: opt.ajaxOptions.method
                    }).done( _.partial( cb, self.search_text ) );
              }
           },
           opt.searchThrottle,
           { leading: false }
        );