JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<p>always a valid autocomplete result else clear input (type a cityname)</p><br/><br/>
<input type="text" id="something"> <input id="somethingHidden" type="text" style="display:none;"/><br/>
<div id="somethingError" class="error">
    <div class="message">Geen geldig resulaat</div>
</div>

CSS

div.error, div.error {
    background: url("http://www.vandijkzakelijk.nl/static/pdpU48iig6PW5zvxjlV1miB0jS62hfl3HOsbTDkCI0W.gif") repeat scroll 0 0 transparent;
    clear: left;
    margin: 3px 8px;
    padding: 6px 0 0;
}

.error {
    color: #C20000;
}
div.error .message, div.error .message {
    border-bottom: 1px solid #C20000;
    border-right: 1px solid #C20000;
    font-size: 12px;
    min-height: 15px;
    padding: 5px 5px 3px;
}
.error{
    width:300px;
    display: none;
}

JavaScript

//always a valid autocomplete result else clear input
function autocompleteStudentName(studentName,studentNameHidden,studentError) {
    function setResponse( message ) {
        $(studentNameHidden).val(message)
        $(studentNameHidden).scrollTop( 0 );
    }
    $(studentName).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    maxRows: 12, //max aantall results
                    name_startsWith: request.term //input text
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + item.adminName1 + " " + item.countryName,
                            value: item.name,
                            studentid: item.population
                        }
                    }));
                }
            });
        },
        minLength: 2,
        //mustMatch: true,  // <--this doesnt work..... 
        //matchSubset: true,                                                        
        select: function( event, ui ) {
            setResponse( ui.item ? + ui.item.studentid : "" + this.value);
            $(studentError).hide();                                        
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        },
        change: function (event, ui) {
            if (!ui.item) {
                $('.message',studentError).text(''+ this.value +'is geen geldig resulaat');
                this.value = '';
                $(studentError).fadeIn();
            }else{
                $(studentError).hide();                    
            }
       ...