如果用户输入正确的字符串，请启用提交按钮

我正在使用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

来源

2017-10-09 Soumyajit

这是修改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

来源

2017-10-09 20:02:49 sbr

感谢您的回答不同的文件访问选项。我在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

您可以检查用户从选择事件的自动完成所选的值，并启用该功能提交按钮，也源必须提到的，这里指的文档 - 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>

来源

2017-10-09 19:02:20 JosephC

如果用户输入正确的字符串，请启用提交按钮

回答

相关问题