Activer le bouton Envoyer si l'utilisateur entre la chaîne correcte

Question

J'utilise jQuery autocomplete et j'obtiens les suggestions de saisie semi-automatique. Je veux activer le bouton de soumission si l'utilisateur entre le nom abrégé correct (c'est-à-dire les options ['valeur']) nom dans l'entrée. L'entrée 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> 

et la logique pour permettre le bouton soumettre (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 fonction autocomplete (de 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', 
    }); 
}); 

L'erreur que j'obtiens dans la console est: ReferenceError: les options ne sont pas définies. Je suis nouveau à cela, quelqu'un peut-il s'il vous plaît aider à résoudre ce problème?

Note: Le fichier search.js est inclus dans index.php

Answer 1

C'est un vers modifié ion de la réponse de JosephC avec une vérification stricte de l'entrée. isValidUserInput vérifie strictement si l'entrée de l'utilisateur est l'une des sociétés préexistantes dans le tableau d'options. Même si l'utilisateur sélectionne une valeur dans la liste déroulante et modifie son entrée à ce moment-là, cela fonctionnera également.

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

et le html inchangé à partir de votre question.

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

ne sont pas liées à cette question, mais puisque vous avez mentionné un problème de portée dans les commentaires, essayez de définir un espace de noms comme App comme suit.

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... 
}); 

Vous pouvez accéder à des options à partir d'un fichier différent en utilisant App.options

Answer 2

Vous pouvez vérifier la valeur sélectionnée par l'utilisateur dans la saisie semi-automatique de l'événement select, et activer le bouton soumettre à cette fonction, aussi la source doit être mentionnée, se référer docs ici - 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>