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

Question

我正在使用 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: options is not defined。我是新手，有人可以帮忙解决这个问题吗？

注意： search.js 文件包含在 index.php

Answer 1

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

Answer 2

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

与此问题无关，但由于您在评论中提到了范围问题，请尝试定义一个名称空间，例如 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

从不同的文件访问选项

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

Enable submit button if the user enters correct string

html

jquery

jquery-ui-autocomplete