JSONでjQuery UIオートコンプリート

Question

これで私の脳を擦っていましたが（これはひどいですが）、私ができることすべてを読んでも、それでもうまくいきませんでした。

jqueryのUIでオートコンプリートをやろうとし

私のJSONは、私はオートコンプリートのソースとして、この情報を使用しようとしています。この

{"dealers": 
    { 
     "1156":"dealer 1", 
     "1122":"dealer 2", 
     "1176":"dealer 3", 
     "1491":"dealer 4", 
     "1463":"dealer 5", 
     "269":"dealer 6" 
    } 
} 

のように見えます。私は応答オブジェクトをちょうどうまく取得していますが、私はちょうど正しいフォーマットでそれを取得するのに困っています。隠しフィールドに "###"を置くことができるので、値の一部として表示する必要があります。落ちる。

は万人のさまざまな方法をしようとしてきたが、最近の試みは

function ajaxCall() { 
    $.getJSON("/example/location/example.json?term=" + $('#dealerName').val(), 
     function(data) { 
     $.each(data.dealers, function(k, v) {     
       alert(k + ' : ' + v); 
     }); 
    });   
} 

$('#dealerName').autocomplete({ 
    source: ajaxCall, 
    minLength: 2, 
    delay: 100 
}); 

ください下回ったとありがとうございました！

Answer 1

戻ってくるオブジェクトを、jQueryUIが期待する形式で配列に変換する必要があります。

$.mapを使用すると、dealersオブジェクトをその配列に変換できます。

$('#dealerName').autocomplete({ 
    source: function (request, response) { 
     $.getJSON("/example/location/example.json?term=" + request.term, function (data) { 
      response($.map(data.dealers, function (value, key) { 
       return { 
        label: value, 
        value: key 
       }; 
      })); 
     }); 
    }, 
    minLength: 2, 
    delay: 100 
}); 

項目を選択すると、「キー」がテキストボックスに配置されます。これを変更するには、$.mapのコールバック関数が返すlabelとvalueのプロパティを調整します。

また、JSONを生成しているサーバー側のコードにアクセスできる場合は、データが返される方法を変更できます。限りデータとして：

• がlabelプロパティを持つオブジェクトの配列、value財産、またはその両方か、それとも
• つまり文字列

の単純な配列です、

[{ value: "1463", label: "dealer 5"}, { value: "269", label: "dealer 6" }] 

またはこの：

次のようなデータをフォーマットすることができる場合10

["dealer 5", "dealer 6"] 

次に、あなたのJavaScriptがはるかに簡単になり：

$('#dealerName').autocomplete({ 
    source: "/example/location/example.json" 
}); 

Answer 2

私はそのが既に回答されていることを理解しています。私はこれが将来誰かを助け、多くの時間と苦痛を節約することを願っています。

完全なコードは次のとおりです。これをテキストボックスで行い、CiviCRMでオートコンプリートにしました。それは私がオートコンプリートで、このjqueryのAJAX呼び出しにデータを返すよどのように誰か

CRM.$('input[id^=custom_78]').autocomplete({ 
      autoFill: true, 
      select: function (event, ui) { 
        var label = ui.item.label; 
        var value = ui.item.value; 
        // Update subject field to add book year and book product 
        var book_year_value = CRM.$('select[id^=custom_77] option:selected').text().replace('Book Year ',''); 
        //book_year_value.replace('Book Year ',''); 
        var subject_value = book_year_value + '/' + ui.item.label; 
        CRM.$('#subject').val(subject_value); 
        CRM.$('input[name=product_select_id]').val(ui.item.value); 
        CRM.$('input[id^=custom_78]').val(ui.item.label); 
        return false; 
      }, 
      source: function(request, response) { 
       CRM.$.ajax({ 
        url: productUrl, 
         data: { 
             'subCategory' : cj('select[id^=custom_77]').val(), 
             's': request.term, 
            }, 
        beforeSend: function(xhr) { 
         xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
        }, 

        success: function(result){ 
           result = jQuery.parseJSON(result); 
           //console.log(result); 
           response(CRM.$.map(result, function (val,key) { 
                 //console.log(key); 
                 //console.log(val); 
                 return { 
                   label: val, 
                   value: key 
                 }; 
               })); 
        } 
       }) 
       .done(function(data) { 
        if (console && console.log) { 
        // console.log("Sample of dataas:", data.slice(0, 100)); 
        } 
       }); 
      } 
    }); 

PHPコードホープ：私はオートコンプリートのためにこのスクリプトを使用

/** 
* This class contains all product related functions that are called using AJAX (jQuery) 
*/ 
class CRM_Civicrmactivitiesproductlink_Page_AJAX { 
    static function getProductList() { 
     $name = CRM_Utils_Array::value('s', $_GET); 
    $name = CRM_Utils_Type::escape($name, 'String'); 
    $limit = '10'; 

     $strSearch = "description LIKE '%$name%'"; 

     $subCategory = CRM_Utils_Array::value('subCategory', $_GET); 
    $subCategory = CRM_Utils_Type::escape($subCategory, 'String'); 

     if (!empty($subCategory)) 
     { 
       $strSearch .= " AND sub_category = ".$subCategory; 
     } 

     $query = "SELECT id , description as data FROM abc_books WHERE $strSearch"; 
     $resultArray = array(); 
     $dao = CRM_Core_DAO::executeQuery($query); 
     while ($dao->fetch()) { 
      $resultArray[$dao->id] = $dao->data;//creating the array to send id as key and data as value 
     } 
     echo json_encode($resultArray); 
    CRM_Utils_System::civiExit(); 
    } 
} 

Answer 3

...

$('#custmoers_name').autocomplete({ 
    source: function (request, response) { 

     // $.getJSON("<?php echo base_url('index.php/Json_cr_operation/autosearch_custmoers');?>", function (data) { 
      $.getJSON("Json_cr_operation/autosearch_custmoers?term=" + request.term, function (data) { 
      console.log(data); 
      response($.map(data, function (value, key) { 
       console.log(value); 
       return { 
        label: value.label, 
        value: value.value 
       }; 
      })); 
     }); 
    }, 
    minLength: 1, 
    delay: 100 
}); 

マイJSONリターン： - 検索m

後[{"label":"Mahesh Arun Wani","value":"1"}]が、それはドロップダウン[object object]に表示...