Question

我已经使用“自动完成”选项创建了添加/删除动态字段。我正在为文本字段使用jQuery UI自动完成功能。该代码工作完美。但是我想强制用户仅选择自动完成选项中出现的文本。以下是代码...

jQuery(document).ready(function($) {
  var wrapper = $("#username-fields");
  var add_button = $("#add-username-fields");

  var x = 1;
  var availableAttributes = [
    "John",
    "Pamela",
    "Rogers",
    "Peter"
  ];

  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
      source: availableAttributes,
    });
    wrapper.append(element);
  });

  wrapper.on("click", "#remove_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

<div id="username-fields">

</div>

我搜索并获得了以下JSFiddle-http://jsfiddle.net/pxfunc/j3AN7/，我想将JSFiddle代码合并到我的代码中，但是有些方法无法合并两者。

Answer 1

尝试此代码

jQuery(document).ready(function($) {
  var wrapper = $("#username-fields");
  var add_button = $("#add-username-fields");

  var x = 1;
  var availableAttributes = [
    "John",
    "Pamela",
    "Rogers",
    "Peter"
  ];
  var previosValue='';

  add_button.click(function(e) {
    e.preventDefault();
    x++;
    var element = $('<div id="user-fields"><div class="row"><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" id="user_login" name="user_login[]" placeholder=""></div></div><div class="col-md-5"><div class="form-group"><input type="text" class="form-control" name="user_role[]" placeholder=""><input type="hidden" class="form-control" name="status[]" value="Unverified" placeholder=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove_field"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div><div class="clear"></div></div>');

    element.fadeIn("slow").find("input[name^='user_login']").autocomplete({
    autoFocus: true,
      source: availableAttributes,
    });
    wrapper.append(element);
  })
  
  wrapper.on("keyup","#user_login",function() {
    var isValid = false;
    for (i in availableAttributes) {
        if (availableAttributes[i].toLowerCase().match(this.value.toLowerCase())) {
            isValid = true;
        }
    }
    if (!isValid) {
        this.value = previousValue
    } else {
        previousValue = this.value;
    }
    
});

  wrapper.on("click", "#remove_field", function(e) {
    e.preventDefault();
    $(this).parent().fadeOut(300, function() {
      $(this).closest('#user-fields').remove();
      x--;
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<button type="button" class="btn btn-success" id="add-username-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add</button>

<div id="username-fields">

</div>

强制用户从“动态添加/删除字段”的“自动完成”选项中选择文本

1 个答案: