0
0
0
آموزش jQuery UI قسمت سوم کار با Autocomplete
آموزش jQuery UI قسمت سوم کار با Autocomplete
در این پست در ادامه آموزش jQuery UI به مبحث Autocomplete در jQuery UI می پردازیم
یکی دیگر از جالب ترین کارهای که می توان با jQuery UI انجام داد جستجوی اتوماتیک می باشد.
در مثال زیر یک input تعریف کردیم و id آن را برابر autocomplete قرار دادیم.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="content/jquery-ui.css" rel="stylesheet" />
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#autocomplete").autocomplete({ source: availableTags });
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="autocomplete">Autocomplete</label>
<input id="autocomplete" title="type "a"">
</div>
</body>
</html>
در اینجا برای اینکه ما داده ای نداریم تا از دیتابیس بخوانیم تعدادی داده را در یک متغیر var به نام availableTags قرار می دهیم. سپس input را با استفاده از id آن انتخاب می کنیم و تابع autocomplete را صدا می زنیم و همچنین source را برابر متغیر var که در بالا تعریف کردیم قرار می دهیم.
این مطلب را به اشتراک بگذارید...
نظر / سوال