1

I'm pretty sure there is a simple way to solve this but of course being a complete newbie to JS, I couldn't find the solution for this.

Currently my code has an autocomplete call to ajax to get search results, like this : 

<input type="text" id="search" name="search">
    ....
<button type="submit" class="button large" id="programsearch">Search</button>


$('#search').autocomplete({
    source: '/ajax-get-data',
    minLength: 3,
    autoFocus: true,
    delay: 100
});

$( "#search" ).on( "autocompletechange", function( event, ui ) {
    if (! ui.item) {
        $(this).val('').attr('placeholder','try again - choose from the list');
    }
});

So if you don't select from the list and click the search button, the input clears out into an empty field and the validator will see it as empty and will throw an error. However, if you type something and you get a drop down list but you don't select from the list, when you hit the enter key, it will submit. How can I tie in a condition where if nothing from the list has been selected (but there is a value in the input field) that the enter key will be disabled? I tried to tie in a .keypress() function but it mostly disables the enter key entirely.

Storm Parker
  • 583
  • 3
  • 7
  • 21
  • hmm you may have to loop through all the options and compare it to the value they have given – Jack C May 14 '15 at 21:14
  • @Jaysbays that sounds like a lot of work. – Storm Parker May 14 '15 at 21:20
  • Maybe this post helps? http://stackoverflow.com/questions/3937513/javascript-validation-for-empty-input-field Seems you want to check if $(this).val() is empty as your condition rather than ui.item. – jmargolisvt May 14 '15 at 21:25
  • It's not really clear how this is supposed to work, but if it's as easy as I think, this should do it -> **http://jsfiddle.net/n7f78w3m/** – adeneo May 14 '15 at 21:27
  • @adeneo that is checking if the field is empty, what I wanted was that if it wasn't selected from the list populated from the autocomplete ajax, the enter key will be disabled, so the field will have values entered in it, but it is not from the list returned. – Storm Parker May 14 '15 at 21:32
  • The I'd suggest you read the documentation and figure out how to get all the matches from the autocomplete list as an array, and do `matches.indexOf(this.value) !== -1` etc. – adeneo May 14 '15 at 21:45
  • @StormParker did you get any solution for this? I have the same problem too. – Souvik Ray Apr 08 '20 at 16:24

1 Answers1

0

This might not be the easiest or most efficient way of doing it - but it should get the job done. I used two global variables, one to track the last value of the search field, and one to track whether an option was chosen. If the value of the search field is changed, then an option is obviously not chosen. The form will only submit when the option was chosen from the list, and the placeholder text will inform the user if they did not select an option when the box loses focus (hence the blur event).

http://jsfiddle.net/Lu5811qt/1/

var submit = false;
var lastVal = $('#search').val();
$('#search').autocomplete({
    source: ['asp', 'jsp', 'javascript', 'php', 'python', 'ruby', 'mysql'],
    minLength: 1,
    autoFocus: true,
    delay: 100,
    select:function(e, ui){
        submit = true;
    }
}).on('keydown', function(){
    if(lastVal != $(this).val()){
        submit = false;
    }
    lastVal == $(this).val();
}).on('blur', function(){
    if(!submit){
        $(this).val('').attr('placeholder','try again - choose from the list');
    }
});;

$('#submit').on('click', function(e){
    if(submit){
        alert('submitting');
    }
    else{
        alert('cannot submit, please choose an autocomplete option');
        e.preventDefault();
    }
});

Edit: I also wanted to mention - you shouldn't rely solely on this. Because it's JS, the client could do some funny things with dev tools. Be sure to verify it on the server as well.