jQuery Autocomplete

• Код
• Чистый код

  1.
	<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
  2.
	<script src="jquery-1.7.1.js"></script>
  3.
	<script src="ui/jquery.ui.core.js"></script>
  4.
	<script src="ui/jquery.ui.widget.js"></script>
  5.
  6.
	<script src="ui/jquery.ui.position.js"></script>
  7.
	<script src="ui/jquery.ui.autocomplete.js"></script>

• Код
• Чистый код

  1.
<script type="text/javascript">
  2.
	$(function() {
  3.
		var projects = [
  4.
			{
  5.
			value: "shrek",
  6.
				label: "шрек, шрек",
  7.
				desc: "мультфильм шрек 2",
  8.
				icon: "shrek.jpg"
  9.
			},
10.
			{
11.
				value: "рождественская история",
12.
				label: "мультфильм рождественская история",
13.
				desc: "мультфильм рождественская история",
14.
				icon: "cristmas.jpg"
15.
			},
16.
			{
17.
				value: "ледниковый период",
18.
				label: "мультфильм ледниковый период",
19.
				desc: "мультфильм ледниковый период",
20.
				icon: "lp.jpg"
21.
			}
22.
			,
23.
			{
24.
				value: "simpsoni",
25.
				label: "симпсоны",
26.
				desc: "описание, описание, описание...",
27.
				icon: "simpsoni.jpg"
28.
			}
29.
		];
30.
31.
$.each(projects,function(i,val){
32.
$('<img />').hide().attr( "src", "images/" + val.icon ).appendTo('body');
33.
});		
34.
		
35.
		$( "#project" ).autocomplete({
36.
			minLength: 0,
37.
			source: projects,
38.
			focus: function( event, ui ) {
39.
				$( "#project" ).val( ui.item.label );
40.
				return false;
41.
			},
42.
			select: function( event, ui ) {
43.
				$( "#project" ).val( ui.item.label );
44.
				$( "#project-id" ).val( ui.item.value );
45.
				$( "#project-description" ).html( ui.item.desc );
46.
				$( "#project-icon" ).fadeOut('slow',function(){
47.
				$(this).attr( "src", "images/" + ui.item.icon ).fadeIn('slow');
48.
				});
49.
50.
				return false;
51.
			}
52.
		})
53.
		.data( "autocomplete" )._renderItem = function( ul, item ) {
54.
			return $( "<li></li>" )
55.
				.data( "item.autocomplete", item )
56.
				.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
57.
				.appendTo( ul );
58.
		};
59.
	});
60.
</script>

• Код
• Чистый код

  1.
<script>
  2.
	$(function() {
  3.
		function log( message ) {
  4.
			$( "<div/>" ).text( message ).prependTo( "#log" );
  5.
			$( "#log" ).scrollTop( 0 );
  6.
		}
  7.
		$( "#birds" ).autocomplete({
  8.
			source: "sug/suggest.php",
  9.
			minLength: 2,
10.
			select: function( event, ui ) {
11.
				log( ui.item ?
12.
					"Выбрано: " + ui.item.value + " aka " + ui.item.id :
13.
					"Нет ничего подходящего " + this.value );
14.
			}
15.
		});
16.
	});
17.
</script>

• Код
• Чистый код

  1.
<?php
  2.
// подключаем основной класс  
  3.
require_once('suggest.class.php');
  4.
$suggest = new Suggest();
  5.
// перменная $keyword - фраза для поиска
  6.
$keyword = $_GET['term'];
  7.
  8.
if(ob_get_length()) ob_clean();
  9.
// заголовки необходимы для браузеров
10.
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT' ); 
11.
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT'); 
12.
header('Cache-Control: no-cache, must-revalidate'); 
13.
header('Pragma: no-cache');
14.
header('Content-Type: text/json; charset=windows-1251;');
15.
// отсылаем данные клиенту
16.
echo $suggest->getSuggestions($keyword);
17.
?>

• Код
• Чистый код

  1.
<?php
  2.
  3.
// подключаем конфигурационный файл
  4.
require_once('config.php');
  5.
  6.
// класс серверной стороны создающий json объект для передачи jQuery
  7.
class Suggest
  8.
{
  9.
  // закрытая переменная - класс для работы с базой 
10.
  private $mMysqli;
11.
  
12.
  // конструктор класса
13.
  function __construct() 
14.
  {   
15.
    // подключаемся к базе данных
16.
    $this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, 
17.
                                                          DB_DATABASE);    
18.
  }
19.
  
20.
  // деструктор   
21.
  function __destruct() 
22.
  {
23.
    $this->mMysqli->close();
24.
  }
25.
  
26.
  // функция возвращающая json объект
27.
  public function getSuggestions($keyword)
28.
  {
29.
    $patterns = array('/\s+/', '/"+/', '/%+/');
30.
    $replace = array('');
31.
    $keyword = preg_replace($patterns, $replace, $keyword);
32.
    // запрос к базе
33.
    if($keyword != '')
34.
      $query = 'SELECT name ' .
35.
               'FROM jquery ' . 
36.
               'WHERE name LIKE "' . $keyword . '%"';
37.
    else
38.
      $query = 'SELECT name ' .
39.
 
40.
               'FROM jquery ' .
41.
               'WHERE name=""'; 
42.
    // выполняем запрос SQL
43.
    $result = $this->mMysqli->query($query);
44.
   
45.
    $output = '[';    
46.
    // результат формируется циклом 
47.
    if($result->num_rows)
48.
		$i = 0;
49.
      while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
50.
		$i++;
51.
		if($i == 1) {
52.
			$output .= '{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}';
53.
		} else {
54.
			$output .= ',{ "id": "'.$row['name'].'", "label": "'.$row['name'].'", "value": "'.$row['name'].'"}';
55.
		}
56.
		}
57.
   // закрываем соединение и освобождаем ресурсы
58.
    $result->close();
59.
    // закрывающий тег json формата
60.
    $output .= ']';   
61.
    // возвращаем данные
62.
    return $output;  
63.
  }
64.
//конец класса
65.
}
66.
?>

• Код
• Чистый код

  1.
<script type="text/javascript">
  2.
$(function() {
  3.
		function logxml( message ) {
  4.
			$( "<div/>" ).text( message ).prependTo( "#logxml" );
  5.
			$( "#logxml" ).scrollTop( 0 );
  6.
		}
  7.
  8.
		$.ajax({
  9.
			url: "sug/suggestxml.php",
10.
			dataType: "xml",
11.
			success: function( xmlResponse ) {
12.
				var data = $( "function", xmlResponse ).map(function() {
13.
					return {
14.
						value: $( "name", this ).text()
15.
						
16.
					};
17.
				}).get();
18.
				console.log(data)
19.
				$( "#birdsxml" ).autocomplete({
20.
					source: data,
21.
					minLength: 0,
22.
					select: function( event, ui ) {
23.
							
24.
						logxml( ui.item ?
25.
							"Selected: " + ui.item.value :
26.
							"Nothing selected, input was " + this.value );
27.
					}
28.
				});
29.
			}
30.
		});
31.
	});
32.
	</script>
33.
34.

• Код
• Чистый код

  1.
<?php
  2.
  3.
// подключаем конфигурационный файл
  4.
require_once('config.php');
  5.
  6.
// класс серверной стороны создающий json объект для передачи jQuery
  7.
class SuggestXML
  8.
{
  9.
  // закрытая переменная - класс для работы с базой 
10.
  private $mMysqliXML;
11.
  
12.
  // конструктор класса
13.
  function __construct() 
14.
  {   
15.
    // подключаемся к базе данных
16.
    $this->mMysqliXML = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, 
17.
                                                          DB_DATABASE);    
18.
  }
19.
  
20.
  // деструктор   
21.
  function __destruct() 
22.
  {
23.
    $this->mMysqliXML->close();
24.
  }
25.
  
26.
  // функция возвращающая json объект
27.
  public function getSuggestions($keyword)
28.
  {
29.
    $patterns = array('/\s+/', '/"+/', '/%+/');
30.
    $replace = array('');
31.
    $keyword = preg_replace($patterns, $replace, $keyword);
32.
    // запрос к базе
33.
34.
      $query = 'SELECT name ' .
35.
               'FROM jquery';
36.
37.
    // выполняем запрос SQL
38.
    $result = $this->mMysqliXML->query($query);
39.
   
40.
// build the XML response
41.
    $output = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
42.
    $output .= '<response>';    
43.
    // if we have results, loop through them and add them to the output
44.
    if($result->num_rows)
45.
      while ($row = $result->fetch_array(MYSQLI_ASSOC)) 
46.
        $output .= '<function><name>' . $row['name'] . '</name></function>';
47.
    // close the result stream 
48.
    $result->close();
49.
    // add the final closing tag
50.
    $output .= '</response>';   
51.
    // return the results
52.
    return $output;    
53.
  }
54.
//конец класса
55.
}
56.
?>

• Код
• Чистый код

  1.
<script>
  2.
	$(function() {
  3.
		var cache = {},
  4.
			lastXhr;
  5.
		$( "#birds" ).autocomplete({
  6.
			minLength: 2,
  7.
			source: function( request, response ) {
  8.
				var term = request.term;
  9.
				if ( term in cache ) {
10.
					response( cache[ term ] );
11.
					return;
12.
				}
13.
14.
				lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
15.
					cache[ term ] = data;
16.
					if ( xhr === lastXhr ) {
17.
						response( data );
18.
					}
19.
				});
20.
			}
21.
		});
22.
	});
23.
	</script>
24.

• Код
• Чистый код

  1.
	<script type="text/javascript">
  2.
	(function( $ ) {
  3.
		$.widget( "ui.combobox", {
  4.
			_create: function() {
  5.
				var self = this,
  6.
					select = this.element.hide(),
  7.
					selected = select.children( ":selected" ),
  8.
					value = selected.val() ? selected.text() : "";
  9.
				var input = this.input = $( "<input>" )
10.
					.insertAfter( select )
11.
					.val( value )
12.
					.autocomplete({
13.
						delay: 0,
14.
						minLength: 0,
15.
						source: function( request, response ) {
16.
							var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
17.
							response( select.children( "option" ).map(function() {
18.
								var text = $( this ).text();
19.
								if ( this.value && ( !request.term || matcher.test(text) ) )
20.
									return {
21.
										label: text.replace(
22.
											new RegExp(
23.
												"(?![^&;]+;)(?!<[^<>]*)(" +
24.
												$.ui.autocomplete.escapeRegex(request.term) +
25.
												")(?![^<>]*>)(?![^&;]+;)", "gi"
26.
											), "<strong>$1</strong>" ),
27.
										value: text,
28.
										option: this
29.
									};
30.
							}) );
31.
						},
32.
						select: function( event, ui ) {
33.
							ui.item.option.selected = true;
34.
							self._trigger( "selected", event, {
35.
								item: ui.item.option
36.
							});
37.
						},
38.
						change: function( event, ui ) {
39.
							if ( !ui.item ) {
40.
								var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
41.
									valid = false;
42.
								select.children( "option" ).each(function() {
43.
									if ( $( this ).text().match( matcher ) ) {
44.
										this.selected = valid = true;
45.
										return false;
46.
									}
47.
								});
48.
								if ( !valid ) {
49.
									// remove invalid value, as it didn't match anything
50.
									$( this ).val( "" );
51.
									select.val( "" );
52.
									input.data( "autocomplete" ).term = "";
53.
									return false;
54.
								}
55.
							}
56.
						}
57.
					})
58.
					.addClass( "ui-widget ui-widget-content ui-corner-left" );
59.
60.
				input.data( "autocomplete" )._renderItem = function( ul, item ) {
61.
					return $( "<li></li>" )
62.
						.data( "item.autocomplete", item )
63.
						.append( "<a>" + item.label + "</a>" )
64.
						.appendTo( ul );
65.
				};
66.
67.
				this.button = $( "<button type='button'> </button>" )
68.
					.attr( "tabIndex", -1 )
69.
					.attr( "title", "Show All Items" )
70.
					.insertAfter( input )
71.
					.button({
72.
						icons: {
73.
							primary: "ui-icon-triangle-1-s"
74.
						},
75.
						text: false
76.
					})
77.
					.removeClass( "ui-corner-all" )
78.
					.addClass( "ui-corner-right ui-button-icon" )
79.
					.click(function() {
80.
						// close if already visible
81.
						if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
82.
							input.autocomplete( "close" );
83.
							return;
84.
						}
85.
86.
						// work around a bug (likely same cause as #5265)
87.
						$( this ).blur();
88.
89.
						// pass empty string as value to search for, displaying all results
90.
						input.autocomplete( "search", "" );
91.
						input.focus();
92.
					});
93.
			},
94.
95.
			destroy: function() {
96.
				this.input.remove();
97.
				this.button.remove();
98.
				this.element.show();
99.
				$.Widget.prototype.destroy.call( this );
100.
			}
101.
		});
102.
	})( jQuery );
103.
	
104.
105.
	$(function() {
106.
		$( "#combobox" ).combobox();
107.
		$( "#toggle" ).click(function() {
108.
			$( "#combobox" ).toggle();
109.
		});
110.
	});
111.
	</script>

• Код
• Чистый код

  1.
$( ".selector" ).autocomplete({ disabled: true });
  2.

• Код
• Чистый код

  1.
//получить значение опции disabled
  2.
var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
  3.
//отключить плагин
  4.
$( ".selector" ).autocomplete( "option", "disabled", true );
  5.

• Код
• Чистый код

  1.
$( ".selector" ).autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
  2.

• Код
• Чистый код

  1.
$( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
  2.

• Код
• Чистый код

  1.
$( ".selector" ).autocomplete({ delay: 0 });
  2.
$( ".selector" ).autocomplete({ minLength: 0 });
  3.