ユーザーが正しい文字列を入力した場合に送信ボタンを有効にする

jqueryオートコンプリートを使用してオートコンプリート候補を取得しています。ユーザーが正しい短縮名（オプション['value']）の名前を入力すると、送信ボタンを有効にします。 HTML入力（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', 
    }); 
});

<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を）を提出有効にします

コンソールに表示されるエラーは次のとおりです。ReferenceError：optionsが定義されていません。私はこれに新しいです、誰もこれを解決するためにお手伝いしてもらえますか？

注：がsearch.jsファイルがindex.phpを

出典

2017-10-09 Soumyajit

これは修正さVERSですジョセフ・Cの答えのイオンが入力を厳密にチェックしています。 isValidUserInputは、ユーザー入力がoptions配列の既存の会社の1つであるかどうかを厳密にチェックします。ユーザーがドロップダウンから値を選択し、その時点で入力を変更したとしても、これは機能します。

$(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は定義されていません。私はここからsearch.jsで宣言されているoptions変数にはアクセスできないと思います。どうすればそれにアクセスできますか？ – Soumyajit

@SoumyajitGorai別の '$（document）.ready'関数の中でsearch.jsファイルの変数を変数に定義したと思います。この場合、別のファイルの '$（document）.ready'コールバック関数内のオプションにアクセスすることはできません。スコープの問題を修正して私の答えを更新しました。 – sbr

ありがとう@sbr。私は今それにアクセスできますが、ボタンは正しい入力で有効になりません。現在のコードは次のようになります： '$（ '＃autocomplete'）{ console.log（ 'matched'）{} ; $（ '＃成功'）removeAttr（ '無効'）;。。 }他{ $（ '＃成功'）（、 '無効' 真）小道具; } }）; ' ' isValidUserInput'関数はcharmのように機能しますが、ボタンはまだ無効のままです。 – Soumyajit

に含まれています。また、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>

出典

2017-10-09 19:02:20 JosephC

ユーザーが正しい文字列を入力した場合に送信ボタンを有効にする

答えて

関連する問題