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

【问题标题】：jquery autocomplete for a textbox should not allow data other than the autocomplete list文本框的jquery自动完成不应允许自动完成列表以外的数据
【发布时间】：2017-03-09 05:19:55
【问题描述】：

文本框的 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/

【问题讨论】：

标签： javascript jquery jquery-ui autocomplete

【解决方案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 回调被触发并更新 out 变量。这也会触发close 回调，因为它现在正在关闭列表。如果用户做出了选择，我们移动一个并重置下一次。如果没有，我们会应用一些技术来提醒用户并保持注意力，直到他们做出选择。

【讨论】：