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

Question

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

我需要解决两个问题。

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

});

Answer 1

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

这是一个包含一些简单 HTML 代码的快速 jsfiddle，但它应该提供一个基本示例，说明如何将相同的事件绑定到多个 dom 结构。

DEMO: JSfiddle example

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>