AutoComplete چیست؟
تصویر بالا از یک جستجو در گوگل میباشد که متن درخاستی کامل نشده و گوگل بصورت اتوماتیک پیشنهاداتی به ما میدهد که با متن وارد شده ما تغریباً یا دقیقاً همخانی دارد
این یک AutoComplete میبشاد
در این آموزش میخایم یک AutoComplete ساده بسازیم…
برای شروع , قالب HTML ایجاد میکنیم
توجه داشته باشید قالب بندی دمو و آموزش باهم فرق دارن
کد:
<!DOCTYPE html>
<html>
<head>
<meta content="fa" http-equiv="Content-Language">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title> AutoComplete - Live-Net.Ir </title>
</head>
<body>
<input name="search" id=mysearch" type="text" onkeyup="sendData();">
<div id="result" style="display:none"></div>
</body>
</html>
ساخت کد آجاکس برای ارسال اطلاعات با jQuery.
کد:
function sendData(){
var $val = $("#mysearch").val();
$.post("info.php", {search: $val },
function(data) {
$("#result").fadeIn();
$("#result").html( data );
});
}
خب تا اینجا ما کاره ساخت قالب و کد اجاکس رو تموم کردیم و چیزه دیگه ای که نیاز داریم یک فایل PHP جهت دریافت اطلاعات و برگرداندن اطلاعات هست
کد php:
<pre><code>//نام های که جستجو میشوند
$a[]="Iran";
$a[]="Tehran";
$a[]="PHP";
$a[]="Cinema";
$a[]="Ehsan";
$a[]="Farsi";
$a[]="Ghanon";
$a[]="Hesar";
$a[]="Professional";
$a[]="Javascript";
$a[]="Kid";
$a[]="Persian";
$a[]="Nina";
$a[]="Saeid";
$a[]="jQuery";
$a[]="Amanda";
$a[]="CSS3";
$a[]="لایونت";
$a[]="Doris";
$a[]="CSS";
$a[]="آرش";
$a[]="فارسی";
$a[]="Tove";
$a[]="سعید";
$a[]="دارو";
$a[]="رضا";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="HTML";
// درصورتی که درخاستی ارسال شده بود لیست بالارو چک میکنیم....
if ( isset ( $_POST['search'] ) )$q=$_POST["search"];
$hint="";
// حالا درخاست ارسال شده را چک میکنیم ( حرف اولش رو ) و با اطلاعات بالا مقایسه میکنیم...
if (strlen($q) > 0)
{
for($i=0; $i < count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
// اگر اطلاعات وارد شده با اطلاعات ما همخانی داشت آنهارو به کار بر نشان میدهیم :
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." <br/> ".$a[$i];
}
}
}
}
// در صورتی که اطلاعات وارد شده با اطلاعات ما همخانی نداشت خروجی ما به کاربر : پیشنهادی داده نمیشود
if ($hint == "")
{
$response="پیشنهادی داده نمیشود";
}
else
{
$response=$hint;
}
echo $response;</code>
امید وارم مطلب مفیدی باشه… اگر سوالی بود درخدمتم
لطفا نظرتون رو بگید ممنون
