Studyon Minte9.com
jQuery




Autocomplete



-- index.htm --

<script type="text/javascript" src="lib/jquery-latest.js"></script>
<script type="text/javascript" src="lib/jqueryui-min.js"></script>
<link href="lib/jqueryui.css" media="screen" rel="stylesheet" type="text/css" />

<input type='text' id='editable_autocomplete' name='editable_autocomplete'>
        
<script type='text/javascript'>
    // autocomplete
    $(function() {
        var cache = {};
        var lastXhr;
        $( "#editable_autocomplete" ).autocomplete({
            minLength: 1,
            source: function( request, response ) {
                var term = request.term;
                if ( term in cache ) {
                    response( cache[ term ] );
                    return;
                }

                lastXhr = $.getJSON( "json.php?keyword="+term, 
                    function( data, status, xhr ) {
                        cache[term] = data;
                        if ( xhr === lastXhr ) {
                            response( data );
                            
                        }
     
                        if (jQuery.isEmptyObject(data)) {
                            //alert('Categoria nu exista sau \r\n Nu aveti drepturile necesare!');
                            //$('#editable_select').val('');
                        }
                    }
                );
            }
        });
    }); 
</script>


-- json.php --

<?php
	$arr = array(
		'Arad', 'Alba',
		'Bucuresti', 'Brasov',
		'Covasna', 'Cluj',
	);

	$matches = array();
	foreach($arr as $v) {
		if (stripos($v, $_GET['keyword']) === 0) {
			array_push($matches, $v);
		}
	}

	echo json_encode($matches);
?>


http://studyon.minte9.com/files/jquery.autocomplete.rar