Question

我使用AJAX从另一个页面调用数据然后将其返回到文本框。触发器来自具有自动填充功能的下拉菜单（您可以在here中看到）

如果我手动尝试，我的AJAX可以正常工作，但是当我选择自动完成时尝试运行此功能时，它不起作用。

这是我的AJAX代码：

function getKonsumen()
{
    var selname = $("select[name=konsumen]").val();
    $.ajax({ url: "getData.php",
        data: {"selname":selname},
        type: 'post',
        dataType: "json",
        success: function(output) {
          console.log(output);
            $("#namak").val(output[2]);
            $("#ktpk").val(output[3]);
            $("#emailk").val(output[4]);
            $("#hpk").val(output[5]);
            $("#alamatk").val(output[6]);
            $("#kotak").val(output[7]);
            $("#datepicker3").val(output[8]);
        }

    });
}

这是我的HTML for dropdown：

<div class="form-group">
    <label>Customer</label>
        <div class="radio">
            <label><input type="radio" name="kons" value="" checked="checked" />Dari Daftar</label>
            <label style="padding-left: 50px; vertical-align:top;"><input type="radio" class="radioBtn" name="kons" value="baru" />Baru</label>
        </div>
        <select name="konsumen" id="combobox" class="konsumens">
            <option value="">Please Choose</option>
            <option value="baru">Create New</option>
            <?php
                $querycon = mysqli_query($conn, "SELECT * FROM m_customer WHERE customer_status='1'");
                while($rowcon = mysqli_fetch_array($querycon, MYSQLI_ASSOC))
                {
                    $nik = sprintf("%s%"."04d", $rowcon['customer_no'], $rowcon['customer_id']);
            ?>
            //get customer list from DB
            <option value="<?php echo $rowcon['customer_id']; ?>" onClick="getkons();"><?php echo $nik. ' | ' .$rowcon['customer_name']; ?></option>
            <?php
                }
            ?>
        </select>
    </div>

最后，我的自动完成的JQuery代码（从jquery web获取）

(function( $ ) {
        $.widget( "custom.combobox", {
          _create: function() {
            this.wrapper = $( "<span>" )
              .addClass( "custom-combobox" )
              .insertAfter( this.element );

            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();
          },

          _createAutocomplete: function() {
            var selected = this.element.children( ":selected" ),
              value = selected.val() ? selected.text() : "";

            this.input = $( "<input>" )
              .appendTo( this.wrapper )
              .val( value )
              .attr( "title", "" )
              .attr( "id", "sicombo" )
              .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
              .autocomplete({
                delay: 0,
                minLength: 0,
                source: $.proxy( this, "_source" )
              })
              .tooltip({
                tooltipClass: "ui-state-highlight"
              });

            this._on( this.input, {
              autocompleteselect: function( event, ui ) {
                ui.item.option.selected = true;
                this._trigger( "select", event, {
                  item: ui.item.option
                });
              },

              autocompletechange: "_removeIfInvalid"
            });
          },

          _createShowAllButton: function() {
            var input = this.input,
              wasOpen = false;

            $( "<a>" )
              .attr( "tabIndex", -1 )
              .attr( "title", "Show All Items" )
              .attr( "id", "sicombo2")
              .tooltip()
              .appendTo( this.wrapper )
              .button({
                icons: {
                  primary: "ui-icon-triangle-1-s"
                },
                text: false
              })
              .removeClass( "ui-corner-all" )
              .addClass( "custom-combobox-toggle ui-corner-right" )
              .mousedown(function() {
                wasOpen = input.autocomplete( "widget" ).is( ":visible" );
              })
              .click(function() {
                input.focus();

                // Close if already visible
                if ( wasOpen ) {
                  return;
                }

                // Pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
              });
          },

          _source: function( request, response ) {
            var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
            response( this.element.children( "option" ).map(function() {
              var text = $( this ).text();
              if ( this.value && ( !request.term || matcher.test(text) ) )
                return {
                  label: text,
                  value: text,
                  option: this
                };
            }) );
          },

          _removeIfInvalid: function( event, ui ) {

            // Selected an item, nothing to do
            if ( ui.item ) {
              return;
            }

            // Search for a match (case-insensitive)
            var value = this.input.val(),
              valueLowerCase = value.toLowerCase(),
              valid = false;
            this.element.children( "option" ).each(function() {
              if ( $( this ).text().toLowerCase() === valueLowerCase ) {
                this.selected = valid = true;
                return false;
              }
            });

            // Found a match, nothing to do
            if ( valid ) {
              getKonsumen();
              return;
            }

            // Remove invalid value
            this.input
              .val( "" )
              .attr( "title", value + " didn't match any item" )
              .tooltip( "open" );
            this.element.val( "" );
            this._delay(function() {
              this.input.tooltip( "close" ).attr( "title", "" );
            }, 2500 );
            this.input.autocomplete( "instance" ).term = "";
          },

          _destroy: function() {
            this.wrapper.remove();
            this.element.show();
          }
        });
      })( jQuery );

      $(function() {
        $( "#combobox" ).combobox();
      });

那么，任何人都可以帮助我在选择自动填充功能时运行我的ajax吗？

Answer 1

$('#combobox').change(function() {
  //Do whatever you want
});

只要有人更改自动填充选择框的值

，就会触发此操作

Answer 2

最后我找到了我的问题的答案，这是我的解决方案，找到：ui.item.option.selected = true;然后我添加这行代码以在点击自动完成时调用该函数：ui.item.option.onclick = getKonsumen(); 一切都完成了......

选中自动填充文本框后，JQuery会自动运行

2 个答案: