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

Question

I know some php/html/css but javascript is where I need help. I found on web autocomplete script, but this doesn't work on more than two input fields.

There are two problems I need to solve.

1. When you type in first box, autocomplete shows in second one. How to make script show autocomplete on box where user is typing?

2. I need to use the same autocomplete on multiple fields on my site.

The javascript syntax I use is:

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

In order to re-use the same autocomplete code you need to give the scope of the function the context of the correct DOM element.

Here's aa quick jsfiddle with some simple HTML code, but it should give a basic example of how to bind the same events to multiple dom structures.

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>