Yii2 在文本自动插入文本框时打开预输入下拉列表

问：

我在我的一种表单中使用了 a。我键入一个序列号，然后出现一个预输入下拉列表，然后我从中选择正确的编号。typeahead

形式

<div class="meter-to-sim-mapping-form">

<?php $form = ActiveForm::begin(['id'=>'simmapping-form','options' => ['enctype' => 'multipart/form-data']]); ?>

<?php  if($model->isNewRecord){?>
    <label class="control-label">Select Meter #</label><br />
    <input type="text" id="the-meter-id" class="form-control col-md-12"  autofocus="autofocus" value="<?=$model->meter_id?>"/>

    <div style="clear: both;"></div>
    <div id="selected_meters_container" ></div>
    <div style="clear: both;"></div>

    <label class="control-label">Select IMSI #</label><br />
    <input type="text" id="the-sim-id" class="form-control col-md-12" value="<?=$model->sim_id?>"/>
    <div style="clear: both;"></div>
    <div id="selected_imsi_container" ></div>
    <div style="clear: both;"></div>


        <label class="control-label">Select IMEI #</label><br />
        <input type="text" id="the-imei-id" class="form-control col-md-12" value="<?=$model->imei_id?>"/>
        <div style="clear: both;"></div>
        <div id="selected_imei_container" ></div>
        <div style="clear: both;"></div>


<?php } ?>


<?= $form->field($model, 'meter_type')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'imsi')->hiddenInput()->label(false) ?>

<?= $form->field($model, 'sim_number')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'operator_name')->textInput(['readonly' => 'readonly']) ?>

<?= $form->field($model, 'meter_msn')->hiddenInput()->label(false) ?>


<div class="form-group">
    <a class="btn btn-default" onclick="window.history.back()" href="javascript:;"><i
                class="fa fa-close"></i>
        Cancel</a>
    <a class="<?= $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary' ?>" onclick="
      $('#simmapping-form').submit();" href="javascript:;">
        <?= $model->isNewRecord ? 'Create' : 'Update' ?></a>
</div>

<?php ActiveForm::end(); ?>

J查询

var surveyReference = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('meter_msn'),
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              //prefetch: 'survey',
              remote: {
                url: '$urlmeters?q=%QUERY',
                wildcard: '%QUERY'
              }
        });
 $('#the-meter-id').typeahead(null, {
            limit: 50,
            name: 'ref-numbers',
            display: 'meter_msn',
            source: surveyReference,
            suggestion: function(data) {
                    return '<p><strong>' + data.id + '</strong> – ' + data.meter_msn + '</p>';
        }
    }
    );

图形用户界面

在选择序列号时，我调用一个 API，它为我提供了一些数据，我从这些数据中选择一个 IMSI 编号，然后添加到文本框中

阿贾克斯看涨

 $.ajax({
                    url: '$urlmsim',
                    method: 'POST',
                    headers: headers,
                    data: formData,
                    processData: false, // Prevent jQuery from processing the data
                    contentType: false, // Let the browser set the content type
                    success: function (imsi) {
                        // Handle and display the IMSI result
                        console.log(imsi.data[0].msim_id);
                        msim_id = imsi.data[0].msim_id;
                        // Set the value of the input element
                        $('#the-sim-id').val(msim_id);
                        // Trigger Typeahead dropdown to open
                       // Trigger Typeahead dropdown to open
                        $('#the-sim-id').focus();                           

                    },
                    error: function (error) {
                        console.error('MSIM API call failed: ' + JSON.stringify(error));
                    },
                    complete: function () {
                        // This function is called after the request is complete, whether it's successful or not
                        hideLoader(); // Hide the loader here
                    }   
                });

如上图所示，您可以看到IMSI编号是在文本框中自动输入的。

每当将IMSI编号插入文本框时，我都想像选择序列号一样提前输入以打开它

IMSI 提前类型

 var surveyReferences = new Bloodhound({
              datumTokenizer: Bloodhound.tokenizers.obj.whitespace('imsi'),
              queryTokenizer: Bloodhound.tokenizers.whitespace,
              //prefetch: 'survey',
              remote: {
                url: '$urlsim?q=%QUERY',
                wildcard: '%QUERY'
              }
        });
 $('#the-sim-id').typeahead(null, {
           
            limit: 50,
            name: 'ref-numbers',
            display: 'imsi',
            source: surveyReferences,
            suggestion: function(data) {
                    return '<p><strong>' + data.id + '</strong> – ' + data.imsi + '</p>';
        }
    }
    );
 jQuery('#the-sim-id').on('typeahead:selected', function (e, datum) {
    
       $('#selected_imsi_container').html('');
        $('#metertosimmapping-imsi').val('');
         $('#metertosimmapping-sim_number').val('');
         $('#metertosimmapping-operator_name').val('');
         //$('#metertosimmapping-sim_status').val(datum.sim_status);
        $('#metertosimmapping-historic').val(datum.historic);
         $('#the-sim-id').blur();
         document.getElementById("the-sim-id").readOnly = true;
        // $('#the-sim-id').readOnly = true;
        var html = '<div class="selected-imsi"><input type="hidden" name="selected_imsi[]" value="'+datum.id+'" />'+datum.imsi+'<a onclick="$(this).closest(\'.selected-imsi\').remove()">X</a></div>';
        $('#selected_imsi_container').append(html);
        $('#metertosimmapping-imsi').append(datum.imsi);
         $('#the-sim-id').typeahead('val','');
         $('#metertosimmapping-sim_number').val(datum.sim_number);
         $('#metertosimmapping-operator_name').val(datum.operator_name);
         //$('#metertosimmapping-sim_status').val(datum.sim_status);
        $('#metertosimmapping-historic').val(datum.historic);
     });