Question

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

中

Answer 1

您可以在select事件中检查用户在自动填充中选择的值，并在该功能中启用提交按钮，同时必须提及来源，请参阅此处的文档 - http://api.jqueryui.com/autocomplete/：

＆＃13;

$(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");
        }
    });
    
  
 });

＆＃13;

<!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>

＆＃13;

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

从其他文件访问选项

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

2 个答案: