Question

文本框的jquery自动完成不应该允许自动完成列表以外的数据。但问题是我只需要允许来自列表自动完成列表的数据而不允许任何其他数据，即使用户输入任何其他数据我们需要显示一条消息，请从自动完成列表中选择。

以下链接还允许除自动填充建议之外的任何数据：

  $("#field").autocomplete({
    source: countries_starting_with_A,
    minLength: 1,
    select: function(event, ui) {
        // feed hidden id field
        $("#field_id").val(ui.item.id);
        // update number of returned rows
        $('#results_count').html('');
    },
    open: function(event, ui) {
        // update number of returned rows
        var len = $('.ui-autocomplete > li').length;
        $('#results_count').html('(#' + len + ')');
    },
    close: function(event, ui) {
        // update number of returned rows
        $('#results_count').html('');
    },
    // mustMatch implementation
    change: function (event, ui) {
        if (ui.item === null) {
            $(this).val('');
            $('#field_id').val('');
        }
    }
});

http://jsfiddle.net/handtrix/32Bck/

Answer 1

有很多方法可以做到这一点。这是一个建议：

工作示例：http://jsfiddle.net/Twisty/32Bck/560/

<强> HTML

<div class="ui-widget" style="position: relative;">
  <input type="text" placeholder="type something ..." id="suggest" />
</div>

<强> CSS

body {
  padding: 30px;
}

input.ui-state-alert {
  border: 1px inset #F00;
}

<强>的JavaScript

var makeSelect = false;
$(document).ready(function() {
  function requiredValid(target) {
    target = $(target);
    // Return Focus
    target.focus();
    // Add alert class
    target.addClass("ui-state-alert");
    $("<div>", {
      class: "required-alert-text",
      style: "color: #F00; font-size: 10px; display: inline-block; position: absolute;"
    }).html("Must select from list.").insertAfter(target).position({
      my: "bottom",
      at: "top+5",
      of: target
    });
  }
  $("#suggest").autocomplete({
    delay: 100,
    source: function(request, response) {
      // Suggest URL
      var suggestURL = "http://suggestqueries.google.com/complete/search?client=chrome&q=" + request.term;

      // JSONP Request
      $.ajax({
          method: 'GET',
          dataType: 'jsonp',
          jsonpCallback: 'jsonCallback',
          url: suggestURL
        })
        .success(function(data) {
          response(data[1]);
        });
    },
    select: function(e, ui) {
      makeSelect = true;
    },
    close: function(e, ui) {
      if (makeSelect) {
        makeSelect = false;
        $(".ui-state-alert").removeClass("ui-state-alert");
        $(".required-alert-text").remove();
      } else {
        requiredValid(this);
      }
    }
  });
  $(".ui-state-alert").on("blur", function() {
    $(this).focus();
  })
});

这不包括所有情况。基本上，我们想知道用户是否从列表中进行了选择。我创建了makeSelect并将其指定为false。我们先前假设用户没有这样做。

当用户选择列表选项时，会触发select回调并更新输出变量。这也会触发close回调，因为它现在正在关闭列表。如果用户进行了选择，我们移动一个并重置以供下次使用。如果没有，我们会应用一些技巧来提醒用户并保持关注，直到他们做出选择。

文本框的jquery自动完成不应允许自动完成列表以外的数据

1 个答案: