在错误的表单字段上自动完成

Autocomplete on wrong form field

本文关键字：字段 错误 表单      更新时间：2023-09-26

我知道一些php/html/css，但javascript是我需要帮助的地方。我在 Web 自动完成脚本上找到，但这不适用于两个以上的输入字段。

我需要解决两个问题。

  1. 当您在第一个框中键入时，自动完成会显示在第二个框中。如何使脚本在用户键入的框中显示自动完成？

  2. 我需要对站点上的多个字段使用相同的自动完成功能。

我使用的javascript语法是：

var MIN_LENGTH = 2;
$( document ).ready(function() {
$("#keyword").keyup(function() {
    var keyword = $("#keyword").val();
    if (keyword.length >= MIN_LENGTH) {
        $.get( "http://example.com/autofill/auto-complete.php", { keyword: keyword } )
        .done(function( data ) {
            $('#results').html('');
            var results = jQuery.parseJSON(data);
            $(results).each(function(key, value) {
                $('#results').append('<div class="item">' + value + '</div>');
            })
            $('.item').click(function() {
                var text = $(this).html();
                $('#keyword').val(text);
            })
        });
    } else {
        $('#results').html('');
    }
});
$("#keyword").blur(function(){
        $("#results").fadeOut(500);
    })
    .focus(function() {     
        $("#results").show();
    });
});

为了重用相同的自动完成代码，您需要为函数的范围提供正确的 DOM 元素的上下文。

这是一个带有一些简单 HTML 代码的快速 jsfiddle，但它应该给出一个如何将相同事件绑定到多个 dom 结构的基本示例。

演示：JSfiddle 示例

.JS

var MIN_LENGTH = 2;
$(document).ready(function() {
  $(".keyword").keyup(function() {
    var $parent = $(this).parent();
    var $results = $parent.find('.results');
    var keyword = $(this).val();
    if (keyword.length >= MIN_LENGTH) {
      $.get("/echo/json/", {
          keyword: keyword
        })
        .done(function(data) {
          $results.html('');
          data = ['test', 'test2'];
          //data = jQuery.parseJSON(data);
          $(data).each(function(key, value) {
            $results.append('<div class="item">' + value + '</div>');
          });
        });
    } else {
      $results.html('');
    }
  });
});

.HTML

<div class="autcomplete">
  <input class="keyword" /> 
  <ul class="results"></ul>
</div>
<div class="autcomplete">
  <input class="keyword" /> 
  <ul class="results"></ul>
</div>
相关文章：