值首先发布，然后只有它完成输入(如果单击）.向后需要(代码是corect）

Value posts firstly and then only it finishes input (if clicked). needed backwards(code is corect)

本文关键字：如果 单击 corect 代码 输入 然后      更新时间：2023-09-26

我上面有国家建议和输入的下拉列表。当我点击其中一个时，AJAX应该起作用（它确实起作用），并为#msg_native添加值。HTML:

echo '<div class="search_native"><input type="text" name="native_input" id="native"/>';
echo "<div id='output'></div></div>";

所有查询：

<script type="text/javascript">  
$(document).ready(function() { 
    $("input").keyup(function(){
        $array = ['usa','france','germany'];
        $input_val = $("input[name='native_input']").val();
        $('#output').text('')
        r = new RegExp($input_val)
        for (i = 0; i < $array.length; i++) {
            if ($array[i].match(r)) {
                $('#output').append('<p class="match">' + $array[i] + '</p>')
            }
        }
    });
    $(document).on('click', '.match', function(){
        $value = $(this).text(); 
        $('#native').val($value);
    });
});
</script>
<script type="text/javascript">
$(function() {
    $('#native').change(function() {
        alert('cl');
        $.ajax({
            type: "POST",
            url: "home.php",
            dataType: 'json',
            encode: true,
            data: {native_input: $("input[name='native_input']").val()},
            cache: false,
            success: function(data){
                alert(data);  
                $("#msg_native").after(data);   
            }});
        return false;
    });
});
</script>

问题是，发布的值只是我自己键入的值，而与单击的元素无关。但我想要完整的价值-不仅仅是打字的字母。。。因此它首先发布值，然后"完成"输入（如果单击）你能给我什么实际的建议？

data: {native_input: $value},

返回空字符串

其中一些可能有争议，但为了代码的可维护性和/或与最新的jQuery相匹配，我将它们放在了适当的位置。

  • 仅使用一个文档就绪处理程序（如果可能）
  • 删除所有全局对象（将var放在它们前面）
  • 尽可能使用native id作为最快选择器（例如，不使用$("input[name='native_input']")）
  • 在事件处理程序中使用this，而不是完整的选择器（请参阅下一项）
  • 如果我输入"法国"而不是"法国"匹配不起作用，那么需要将输入大小写为相等var $input_val = $(this).val().toLowerCase();
  • 您从一个空字段开始，最好显示匹配项-只需在启动时触发keyup即可显示所有数组：}).trigger('keyup');现在它们可供您单击
  • 将点击处理程序附加到"match"元素的包装器上：$('#output').on('click', '.match', function() {
  • 使用ajax .done(的promise表单
  • 创建一个新的自定义事件，而不是native上的"更改"。然后，我们可以在需要时触发该事件（您描述的真实问题）示例：$('#native').trigger('myMatch');，我在这里使用它：

在完全匹配时触发事件：

if (jQuery.inArray($input_val, $array) !== -1) {
  $(this).trigger('myMatch');
}

修订代码：

$(document).ready(function() {
  $("#native").on('keyup', function() {
    var $array = ['usa', 'france', 'germany'];
    var $input_val = $(this).val().toLowerCase();
    $('#output').html('');
    var r = new RegExp($input_val);
    for (var i = 0; i < $array.length; i++) {
      if ($array[i].match(r)) {
        $('#output').append('<p class="match">' + $array[i] + '</p>');
      }
    }
    // full match entered, trigger the match
    if (jQuery.inArray($input_val, $array) !== -1) {
      $(this).trigger('myMatch');
    }
  }).on('myMatch', function() {
    alert('cl');
    var nativeMatch = {
      native_input: $("#native").val()
    };
    $.ajax({
      type: "POST",
      url: "home.php",
      dataType: 'json',
      encode: true,
      data: nativeMatch,
      cache: false
    }).done(function(data) {
      alert(data);
      $("#msg_native").after(data);
    });
    return false;
  }).trigger('keyup');
  $('#output').on('click', '.match', function() {
    var $value = $(this).text();
    $('#native').val($value).trigger('myMatch');
  });
});
相关文章：