如果用户输入正确的字符串,请启用提交按钮
问题描述:
我正在使用jquery自动填充并获取自动填充建议。如果用户在输入中输入正确的短名称(即options ['value'])名称,我想启用提交按钮。 HTML输入(的index.php):如果用户输入正确的字符串,请启用提交按钮
<input class="form-control typeahead" id="autocomplete" name="autocomplete" placeholder="COMPANY NAME" type="text" />
<div id="res"></div>
<button type="button" class="form-control btn btn-success" id="success" disabled>SUBMIT</button>
和逻辑来启用提交按钮(的index.php):
$("#res").click(function(){
$("#success").prop("disabled", false);
});
$("#autocomplete").keyup(function(){
if (!($('.autocomplete-suggestions').is(':visible')) && $('#autocomplete').val() != '' && options.hasOwnProperty($(this).val())) {
$("#success").prop("disabled", false);
}else {
$("#success").prop("disabled", true);
}
});
JQuery的自动完成功能(search.js):
var options;
$(function(){
options = [{ value: "WIPRO", data: "Wipro ltd" },{ value: "TCS", data: "Tata consultancy serv lt" },{ value: "INFY", data: "Infosys limited" }];
$('#autocomplete').autocomplete({
lookup: options,
appendTo: '#res',
});
});
我在控制台中得到的错误是:ReferenceError:选项未定义。我是新来的,任何人都可以帮忙解决这个问题吗?
注:的search.js文件包含在的index.php
答
这是修改VERS约瑟夫C的答案与严格检查输入。 isValidUserInput
严格检查用户输入是选项阵列中的现有公司之一。即使用户从下拉列表中选择了一个值,并且在那个时候也改变了他的输入,这也是可行的。
$(document).ready(function(){
var $autoComplete = $("#autocomplete"),
$success = $("#success");
function isValidUserInput(input){
return app.options.some(function(option){
return input.toLowerCase() === option.label.toLowerCase();
});
}
$autoComplete.keyup(function(){
if(isValidUserInput($(this).val())) {
$success.prop('disabled', false);
} else {
$success.prop('disabled', true);
}
});
$autoComplete.autocomplete({
source: app.options,
appendTo: '#res',
select: function(){
$success.removeAttr("disabled");
}
});
});
和你的问题没有改变的HTML。
<input class="form-control typeahead" id="autocomplete" name="autocomplete" placeholder="COMPANY NAME" type="text" />
<div id="res"></div>
<button type="button" class="form-control btn btn-success" id="success" disabled>SUBMIT</button>
不涉及这个问题,但因为你在评论中提到一个范围问题,请尝试定义诸如App
命名空间如下。
var App = {};
$('document').ready(function(){
App.options = [{ label: "WIPRO", data: "Wipro ltd" },{ label: "TCS", data: "Tata consultancy serv lt" },{ label: "INFY", data: "Infosys limited" }];
// rest of your code...
});
您可以使用App.options
答
您可以检查用户从选择事件的自动完成所选的值,并启用该功能提交按钮,也源必须提到的,这里指的文档 - http://api.jqueryui.com/autocomplete/:
$(document).ready(function(){
$("#autocomplete").keyup(function(){
if($(this).val()=== '') {
$("#success").attr("disabled", 'disabled');
}
});
var options;
options = [{ label: "WIPRO", data: "Wipro ltd" },{ label: "TCS", data: "Tata consultancy serv lt" },{ label: "INFY", data: "Infosys limited" }];
$('#autocomplete').autocomplete({
source: options,
appendTo: '#res',
select: function(){
$("#success").removeAttr("disabled");
}
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<input class="form-control typeahead" id="autocomplete" name="autocomplete" placeholder="COMPANY NAME" type="text" />
<div id="res"></div>
<button type="button" class="form-control btn btn-success" id="success" disabled>SUBMIT</button>
</body>
</html>
感谢您的回答不同的文件访问选项。我在index.php中添加了这段代码,但仍然收到错误:ReferenceError:options没有定义。我想我无法从这里访问options变量(在search.js中声明)。你能告诉我如何访问它? – Soumyajit
@SoumyajitGorai我猜你已经在另一个'$(document).ready'函数内的search.js文件中定义了options变量。在这种情况下,您不能在另一个文件中访问'$(document).ready'回调函数中的选项。用范围问题修正更新了我的答案。 – sbr
谢谢@sbr。我现在可以访问它,但按钮没有启用正确的输入。我现在的代码如下所示: '$('#autocomplete')。keyup(function(){ if(isValidUserInput($('#autocomplete').val())){ console.log('matched') ; $( '#成功')removeAttr( '禁用'); }其他{ $( '#成功')丙( '禁用',真正的); } });' ' isValidUserInput'功能像魅力一样,但按钮仍然保持禁用状态。 – Soumyajit