Question

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

我需要解决两个问题。

当您输入第一个框时，自动完成功能会显示在第二个框中。如何在用户输入的框中使脚本显示自动完成？
我需要在我的网站上的多个字段中使用相同的自动填充功能。

我使用的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代码，但它应该给出一个基本的例子，说明如何将相同的事件绑定到多个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>

在错误的表单字段上自动填充

1 个答案: