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

【问题标题】：Enable submit button if the user enters correct string如果用户输入正确的字符串，则启用提交按钮
【发布时间】：2017-10-09 12:25:04
【问题描述】：

我正在使用 jquery 自动完成并获取自动完成建议。如果用户在输入中输入正确的短名称（即选项 ['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 中

【问题讨论】：

标签： jquery html jquery-ui-autocomplete

【解决方案1】：

这是 JosephC 答案的修改版本，对输入进行了严格检查。 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>

与此问题无关，但由于您在 cmets 中提到了范围问题，请尝试定义一个命名空间，如 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从不同的文件访问选项

【讨论】：

感谢您的回答。我在 index.php 中添加了这段代码，但仍然收到错误：ReferenceError: options is not defined。我想我无法从这里访问 options 变量（在 search.js 中声明）。你能告诉我如何访问它吗？
@SoumyajitGorai 我猜你已经在另一个 $(document).ready 函数内的 search.js 文件中定义了 options 变量。在这种情况下，您无法访问不同文件中 $(document).ready 回调函数中的选项。用范围问题修复更新了我的答案。
谢谢@sbr。我现在可以访问它，但是在正确输入时没有启用该按钮。我当前的代码如下所示：$('#autocomplete').keyup(function() { if( isValidUserInput($('#autocomplete').val()) ){ console.log('matched'); $('#success').removeAttr('disabled'); }else{ $('#success').prop('disabled', true); } });isValidUserInput 功能就像魅力一样，但按钮仍然处于禁用状态。
嗯。为我工作。这是我的codepen链接。 codepen.io/cplog/pen/WZJBMG
检查了你的 codepen 链接@sbr。它不起作用...仅当您单击建议时，该按钮才会启用。一旦我完成输入“WIPRO”或任何其他正确的标签，提交按钮就应该被启用，这不会发生。该按钮仍处于禁用状态。

【解决方案2】：

您可以在选择事件中检查用户在自动完成中选择的值，并在该功能中启用提交按钮，还必须提及来源，请参阅此处的文档-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>

【讨论】：