jQuery Jeditable and Autocomplete hybrid

Jeditable – edit in place plugin for jQuery. The Autocomplete - jQuery UI Autocomplete control widget provides suggestions while you type into the field. So why not combine them together. This javascript code will let you edit in place along with suggestions while you type into the field.

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery UI autocomplete and edit-in-place hybrid</title>
		<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.20.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.jeditable.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			$('.edit').editable('save.php', {
				loadurl: 'save.php',
				indicator: 'Saving...',
				tooltip: 'Click to edit...',
				style: "inherit",
				//Click outside editable area is ignored for autocomplete clicks
				onblur: "ignore"
			}).click(function(){
				$(this).find('input').autocomplete({
				source: function( request, response ) {
					$.ajax({
						url: "autocomplete.php",
						dataType: "jsonp",
						data: {
							maxRows: 10,
							q: request.term
						},
						success: function( data ) {
							response( $.map( data, function( item ) {
								return {
									label: item,
									value: item
								}
							}));
						}
					});
				},
				//delay: 200,
				minLength: 1
			});
			});
		});	
		</script>

		<style type="text/css">
			.edit {border-bottom:3px solid #FF0000;}
		</style>
	</head>
	<body>
		<span class="edit" id="city">Vilnius</span> is the capital of Lithuania.
		<p>
		Example city: Vilnius, Klaipėda, Kaunas, Šiauliai, Palanga.
		<p>
	</body>
</html>

Suggestions populated from autocomplete.php file:

<?
header('Content-Type: text/plain; charset=utf-8');
header('Accept-Ranges: bytes');
mb_internal_encoding("UTF-8");

$q = $_GET['q'];
	
//example data
$city = array('Vilnius', 'Klaipėda', 'Kaunas', 'Šiauliai', 'Palanga');

function filter($var){
    global $q;
	if(strpos(mb_strtolower($var), mb_strtolower($q)) === false){
		return false;
	}
	return true;
}

$city = array_filter($city, "filter");

echo $_GET['callback'].'('.json_encode($city).')';
//for PHP version < 5.2.0 alternative is fastJSON class http://fastjson.codeplex.com
//$fast_json = new FastJSON();
//echo $_GET['callback'].'('.$fast_json->convert($city).')';

Default field value and save action in save.php file:

<?
header('Content-Type: text/plain; charset=utf-8');
header('Accept-Ranges: bytes');
mb_internal_encoding("UTF-8");

$id = $_POST['id'];
$value = $_POST['value'];

//example data
$city = array('Vilnius', 'Klaipėda', 'Kaunas', 'Šiauliai', 'Palanga');

//load default value
if($value == ''){
	echo $city[0];
	exit;
}

function filter($var){
    global $value;
	if(mb_strtolower($var) != mb_strtolower($value)){
		return false;
	}
	return true;
}
//Saved city exists?
$city_filtered = array_filter($city, "filter");

//output
if(count($city_filtered)==1){
	//Saved city exists
	echo implode($city_filtered);
}else{
	//default city if not exists
	echo $city[0];
}

Download jQuery Jeditable and Autocomplete hybrid source code.

This entry was posted in Programming and tagged , , , , , . Bookmark the permalink.

5 Responses to jQuery Jeditable and Autocomplete hybrid

  1. D Nizzle

    Could you show how to use jeditable with jquery.chosen? Thanks! 🙂

    • Just posted example here http://polyetilen.lt/en/jquery-jeditable-and-chosen-hybrid, jeditable support select box and you can do any action after click on editable area for example chosen:

      $('.edit').editable('save.php', {
      	data: "{'Vilnius':'Vilnius', 'Kaunas':'Kaunas', 'selected':'Vilnius'}",
      	indicator: 'Saving...',
      	tooltip: 'Click to edit...',
      	style: "inherit",
      	onblur: "ignore",
      	type   : 'select',
      	submit : 'Submit'
      }).click(function(){
      	//my action after editable element clicked
      	$(this).find('select').chosen();
      });
      
  2. Hi, Why is not working for me? Some help please. When I edit the editable text, the replacement doesn't save.. :'( How to do.. Please...

    • May be your php version without json_encode, this example for PHP 5 minimum version 5.2.0 and enabled support for multibyte string functions (mb_).

  3. Jade

    Thank you SO MUCH!! This was driving me crazy!!

Leave a Reply

Your email address will not be published. Required fields are marked *