web-dev-qa-db-ja.com

jQueryオートコンプリート選択イベント

私はjQuery UIオートコンプリートを作成しましたが、これは非常にうまく機能しています。しかし、私の要件は、リストとして表示するものもテキストボックスで同じものを選択することです。しかし、それはXXX（XYZ）のようなリストを選択していませんが、それを選択するとき、XXX（XYZ）ではなくXXXだけを選択します。

function getDeptStations() {
$("#txDestination").autocomplete({
  source: function (request, response) {
    var term = request.term;
    var Query = "";
    if (lang === "en")
      Query = "City_Name_EN";
    else if (lang === "fr")
      Query = "City_Name_FR";
    if (lang === "de")
      Query = "City_Name_DE";
    if (lang === "ar")
      Query = "City_Name_AR";
    var requestUri = "/_api/lists/getbytitle('Stations')/items?$select=City_Code," + Query + "&$filter=startswith(" + Query + ",'" + term + "')";
    $.ajax({
      url: requestUri,
      type: "GET",
      async: false,
      headers: {
        "ACCEPT": "application/json;odata=verbose"
      }
    }).done(function (data) {
      if (data.d.results) {
        response($.map(eval(data.d.results), function (item) {
          return {
            label: item[Query] + " (" + item.City_Code + ")",
            value: item[Query],
            id: item[Query]
          }
        }));
      }
      else {

      }
    });
  },
  response: function (event, ui) {
    if (!ui.content.length) {
      var noResult = { value: "", label: "No cities matching your request" };
      ui.content.Push(noResult);
    }
  },
  select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
  },
  minLength: 1
});
 }
javascriptjqueryjquery-uiautocomplete
21
Milind

ほぼそこに、selectイベントからfalseを返すだけです。

select: function (event, ui) {
    $("#txDestination").val(ui.item.label);
            cityID = ui.item.id;
    return false;
  },

または単に

select: function (event, ui) {        
          alert(ui.item.id);
          return false;
  },

これは、selectが値を設定したことを知るためにjqueryオートコンプリートをガイドします。

更新：これはドキュメントにはありません。ソースコードを掘り下げることでわかりましたが、時間がかかりました。しかし、実際にはドキュメントまたはオプションに含まれるに値します。

38
SSA

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

結果をオートコンプリートで取得した後、以下のコードを使用して、オートコンプリートテキストボックスフィールドに値を保持できます。 (you can replace 'CRM.$' with '$' or 'jQuery' depending on your jQuery version)

select: function (event, ui) {
                var label = ui.item.label;
                var value = ui.item.value;

                //assigning the value to hidden field for saving the id
                CRM.$( 'input[name=product_select_id]' ).val(value);
                //keeping the selected label in the autocomplete field
                CRM.$('input[id^=custom_78]').val(label);
                return false;
        },

完全なコードは次のとおりです。これは、CiviCRMでテキストボックスをオートコンプリートにするために行ったものです。それが誰かを助けることを願っています

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 ) );
                    }
                });
            }
  });

オートコンプリートでこのjquery ajax呼び出しにデータを返す方法に関する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();
  }
}
1
Developer

この場合、オプションが必要です

  1. 明らかなものはvalue:item[Query] + " (" + item.City_Code + ")"を設定しますが、これはオプションではないと思います。

  2. 最初に api doc をチェックして、自分で選択を処理すると、次のようなイベントが表示されます。 event.targetuiを使用して入力にアクセスできます。選択したアイテムにアクセスできます。

    $( ".selector" ).autocomplete({
    select: function( event, ui ) {}
});
0
Onur Topal