Question

我已经创建了具有自动完成功能的添加/删除动态字段。我希望用户限制用户输入除自动完成文本以外的其他文本。以下是我的代码...

  jQuery(document).ready(function($) {
        
        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $("#username-fields"); //Fields wrapper
        var add_button      = $("#add-username-fields"); //Add button ID
        
        var x = 1; //initlal text box count
        var availableAttributes = [
	  "account_address",
	  "account_address_city",
	  "account_address_country",
	  "account_address_state"
    ];
        
        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="fund-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=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-username-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div></div>'); 
                
                $(wrapper).find("input[name^='user_login']").autocomplete({
                    source: availableAttributes
                });	
                //add input box
            }
        });
        
        $(wrapper).on("click","#remove-username-fields", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })
        
        $("input[name^='user_login']").autocomplete({
    		source: availableAttributes
    	});
    	
    });

<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 id="add-username-fields">Add More Fields</button>
    <div><input type="text" name="user_login[]"></div>
    
    <div id="username-fields">
    
    </div>

请帮助我...谢谢...

Answer 1

根据documentation，您可以使用change事件来检查用户是否从列表中选择了任何项目。您的自动完成代码将如下所示。

$(wrapper).find("input[name^='user_login']").autocomplete({
   source: availableAttributes,
   change: function( event, ui ) {
      if (ui.item == null) {
         $(this).val("");
         $(this).focus();
      }
   }
});

编辑： 完整的js代码。

jQuery(document).ready(function($) {

        var max_fields      = 10; //maximum input boxes allowed
        var wrapper         = $("#username-fields"); //Fields wrapper
        var add_button      = $("#add-username-fields"); //Add button ID

        var x = 1; //initlal text box count
        var availableAttributes = [
           "account_address",
           "account_address_city",
           "account_address_country",
           "account_address_state"
         ];

        $(add_button).click(function(e){ //on add input button click
            e.preventDefault();
            if(x < max_fields){ //max input box allowed
                x++; //text box increment
                $(wrapper).append('<div class="fund-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=""></div></div><div class="col-md-2"><button type="button" class="btn btn-danger" id="remove-username-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove</button></div></div></div>'); 

                $(wrapper).find("input[name^='user_login']").autocomplete({
                    source: availableAttributes,
                    change: function( event, ui ) { // <---- here
                       if (ui.item == null) {
                         $(this).val("");
                         $(this).focus();
                       }
                     }
                }); 
                //add input box
            }
        });

        $(wrapper).on("click","#remove-username-fields", function(e){ //user click on remove text
            e.preventDefault(); $(this).parent('div').remove(); x--;
        })

        $("input[name^='user_login']").autocomplete({
            source: availableAttributes,
            change: function( event, ui ) { // <---- and here
               if (ui.item == null) {
                   $(this).val("");
                   $(this).focus();
               }
            }
        });

    });

如何限制用户输入“自动完成”文本以外的文本

1 个答案: