Skip Navigation Links
صفحه اصلی
ارتباط با ما Expand ارتباط با ما
همه مطالب
تصاویر Expand تصاویر
فرصت های شغلی
سوالات متداول
جستجو
     
 
لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql
آژاکس (ajax)، فناوری است که امروزه در صفحات وب و به ویژه در برنامه ها و سرویس هایی نظیر شبکه های اجتماعی، چت روم ها، دیکشنری های آنلاین، موتورهای جستجو و... به وفور مورد استفاده قرار می گیرد، به فرض اگر در سایتی مثل گوگل بخواهید کلمه ای را جستجو کنید، پس از تایپ یک عبارت، درخواست شما به طور خودکار به سرور ارسال می شود و گوگل متناسب با آن کلماتی را به شما پیشنهاد می کند

از این کد می توانید به فرض در یک دیکشنری آنلاین برای پیشنهاد کلمات به صورت یک لیست بازشونده استفاده کنید، یا وقتی کاربر به دنبال عبارتی است، با این کار او را راهنمایی کنید و خیلی ایده های جالب دیگر که می توان با آن انجام داد، این نوع قابلیت ها به نام ajax auto complete یا ajax auto suggest نیز معروف هستند؛ لازم به ذکر است که این برنامه توسط برنامه نویسان خارجی و متناسب با زبان انگلیسی نوشته شده است، ولی به جهت راحتی کاربران، برای کار با زبان فارسی بهینه و کمی هوشمندتر شده است و تا آنجا که ما بررسی کرده ایم مشکل خاصی با حروف فارسی ندارد.

دانلود لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql:


ابتدا فایل زیر را دریافت و سپس با توجه به ادامه مطلب، مراحل را انجام دهید تا کد قابل استفاده باشد.
دانلود لیست داینامیک پیشنهاد کلمات
توضیح:
- بسته بالا حاوی چند فایل با نام های ajax-list.php (فایلی که درخواست آژاکسی به آن ارسال می شود)، create.php (از این فایل می توانید برای ساخت جدول و ورود اطلاعاتی جهت تست برنامه بر روی لوکال هاست یا سرور استفاده کنید) و یک پوشه با نام ajax-dynamic-list با دو فایل جاوا اسکریپتی است که جهت کارکرد صحیح برنامه مورد نیاز است؛ فایل ایندکس هم برای نمونه در بسته بالا قرار داده شده است.
- این کد نسبت به شناسایی حروف فارسی ممکن است درست عمل نکند، اگر این مشکل پیش آمد، دقت کنید که یونیکد جداول شما در mysql باید utf8_general_ci یا سازگار با حروف فارسی باشد، جهت اطمینان ترجیحا بر روی لوکال هاست با یونیکد های مختلف تست کنید.

پیش نمایش:


ajax dynamic list 
پیش نمایش (نکته: این پیش نمایش بدون اتصال به پایگاه داده و صرفا جهت تست، شبیه سازی شده و ممکن است نسبت به کد اصلی، تفاوتهایی داشته باشد).

نحوه استفاده از لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، php و mysql:


ابتدا در سیستم مدیریت پایگاه داده خود، دیتابیسی با نام فرضی words بسازید (اگر این نام را تغییر دهید، باید در تمام فایل های برنامه، عناوین words را متناسب با نام جدید تنظیم کنید)؛ سپس کد زیر را جهت ساخت جدول ajax_words و دو ردیف id و word و ورود اطلاعات پیش فرض اجرا کنید (قبل از اجرای کد باید اطلاعات اتصال به پایگاه داده را در متغیر con تعریف کنید، به صورت پیش فرض این کار برای لوکال هاست انجام شده).

<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("words",$con);
$string = "کلمه 1,کلمه 2,کلمه 3,کلمه 4,کلمه 5";
mysql_query("create table ajax_words(id INT auto_increment not null primary key,word varchar(255))")
or die(mysql_error());
//set utf 8 for table
mysql_query("ALTER TABLE ajax_words
DEFAULT CHARACTER SET utf8
COLLATE utf8_general_ci;")
or die(mysql_error());
$words = explode(",",$string);
for($no=0;$no<count($words);$no++){
mysql_query("insert into ajax_words(word)values(".$words[$no].")")
or die(mysql_error());
}
?>

سپس فایل ایندکس را اجرا کنید (آدرس آن را به صورت لوکال هاست یا سرور در مرورگر خود وارد کنید تا فراخوانی شود)؛ محتویات فایل ایندکس:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | لیست داینامیک مبتنی بر آژاکس</title>
<style type="text/css">
body{
background-color:#E2EBED;
font-family:Tahoma, Geneva, sans-serif;
font-size:12px;
direction:rtl;
}
#mainContainer{
width:660px;
margin:0 auto;
text-align:left;
height:100%;
background-color:#FFF;
border-left:3px double #000;
border-right:3px double #000;
}
#formContent{
padding:5px;
}
#ajax_listOfOptions{
position:absolute;
width:175px;
height:100px;
overflow:hidden;
border:1px solid #317082;
background-color:#FFF;
text-align:left;
font-size:12px;
z-index:100;
}
#ajax_listOfOptions div{
margin:1px;
padding:1px;
cursor:pointer;
font-size:12px;
}
#ajax_listOfOptions .optionDiv{
/* Div for each item in list */
text-align:right;
}
#ajax_listOfOptions .optionDivSelected{
/* Selected item in the list */
background-color:#317082;
color:#FFF;
text-align:right;
}
#ajax_listOfOptions_iframe{
background-color:#F00;
position:absolute;
z-index:5;
}
form{
display:inline;
}
</style>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript" src="js/ajax-dynamic-list.js"></script>
</head>
<body>
<form id="formContent" action="">
<label for="word">انتخاب: </label>
<input type="text" id="word" name="word" value="" onkeyup="ajax_showOptions(this,getword,event)" />
<input type="hidden" id="word_hidden" name="word_id" />
<label for="word2">انتخاب 2: </label>
<input type="text" id="word2" name="word2" value="" onkeyup="ajax_showOptions(this,getword,event)" />
</form>
</body>
</html>

برای اجرای صحیح برنامه دو فایل ajax.js و ajax-dynamic-list.js باید به درستی در صفحه ایمپورت شده باشند.
محتویات فایل ajax.js:

function sack(file) {
this.xmlhttp = null;
this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};

this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};

this.reset = function() {
this.resetFunctions();
this.resetData();
};

this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}

if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};

this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};

this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}

this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}

this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}

if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}

// prevents caching of URLString
this.setVar("rndval", new Date().getTime());

urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}

urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}

this.runResponse = function() {
eval(this.response);
}

this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}

this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;

if (self.execute) {
self.runResponse();
}

if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}

self.URLString = "";
break;
}
};

this.xmlhttp.send(this.URLString);
}
}
};

this.reset();
this.createAJAX();
}

محتویات فایل ajax-dynamic-list.js:

var ajaxBox_offsetX = 0;
var ajaxBox_offsetY = 0;
var ajax_list_externalFile = ajax-list.php; // Path to external file
var minimumLettersBeforeLookup = 1; // Number of letters entered before a lookup is performed.

var ajax_list_objects = new Array();
var ajax_list_cachedLists = new Array();
var ajax_list_activeInput = false;
var ajax_list_activeItem;
var ajax_list_optionDivFirstItem = false;
var ajax_list_currentLetters = new Array();
var ajax_optionDiv = false;
var ajax_optionDiv_iframe = false;

var ajax_list_MSIE = false;
if(navigator.userAgent.indexOf(MSIE)>=0 && navigator.userAgent.indexOf(Opera)<0)ajax_list_MSIE=true;

var currentListIndex = 0;

function ajax_getTopPos(inputObj)
{

var returnValue = inputObj.offsetTop;
while((inputObj = inputObj.offsetParent) != null){
returnValue += inputObj.offsetTop;
}
return returnValue;
}
function ajax_list_cancelEvent()
{
return false;
}

function ajax_getLeftPos(inputObj)
{
var returnValue = inputObj.offsetLeft;
while((inputObj = inputObj.offsetParent) != null)returnValue += inputObj.offsetLeft;

return returnValue;
}

function ajax_option_setValue(e,inputObj)
{
if(!inputObj)inputObj=this;
var tmpValue = inputObj.innerHTML;
if(ajax_list_MSIE)tmpValue = inputObj.innerText;else tmpValue = inputObj.textContent;
if(!tmpValue)tmpValue = inputObj.innerHTML;
ajax_list_activeInput.value = tmpValue;
if(document.getElementById(ajax_list_activeInput.name + _hidden))document.getElementById(ajax_list_activeInput.name + _hidden).value = inputObj.id;

//var f1=setTimeout(ajax_list_activeInput.focus(),1);
//var f2=setTimeout(ajax_list_activeInput.value = ajax_list_activeInput.value,1);

ajax_options_hide();
}

function ajax_options_hide()
{
if(ajax_optionDiv)ajax_optionDiv.style.display=none;
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display=none;
}

function ajax_options_rollOverActiveItem(item,fromKeyBoard)
{
if(ajax_list_activeItem)ajax_list_activeItem.className=optionDiv;
item.className=optionDivSelected;
ajax_list_activeItem = item;

if(fromKeyBoard){
if(ajax_list_activeItem.offsetTop>ajax_optionDiv.offsetHeight){
ajax_optionDiv.scrollTop = ajax_list_activeItem.offsetTop - ajax_optionDiv.offsetHeight + ajax_list_activeItem.offsetHeight + 2 ;
}
if(ajax_list_activeItem.offsetTop<ajax_optionDiv.scrollTop)
{
ajax_optionDiv.scrollTop = 0;
}
}
}

function ajax_option_list_buildList(letters,paramToExternalFile)
{

ajax_optionDiv.innerHTML = ;
ajax_list_activeItem = false;
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length<=1){
ajax_options_hide();
return;
}



ajax_list_optionDivFirstItem = false;
var optionsAdded = false;
for(var no=0;no<ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length;no++){
if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].length==0)continue;
optionsAdded = true;
var div = document.createElement(DIV);
var items = ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()][no].split(/###/gi);

if(ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()].length==1 && ajax_list_activeInput.value == items[0]){
ajax_options_hide();
return;
}


div.innerHTML = items[items.length-1];
div.id = items[0];
div.className=optionDiv;
div.onmouseover = function(){ ajax_options_rollOverActiveItem(this,false) }
div.onclick = ajax_option_setValue;
if(!ajax_list_optionDivFirstItem)ajax_list_optionDivFirstItem = div;
ajax_optionDiv.appendChild(div);
}
if(optionsAdded){
ajax_optionDiv.style.display=block;
if(ajax_optionDiv_iframe)ajax_optionDiv_iframe.style.display=;
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}

}

function ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,whichIndex)
{
if(whichIndex!=currentListIndex)return;
var letters = inputObj.value;
var content = ajax_list_objects[ajaxIndex].response;
var elements = content.split(|);
ajax_list_cachedLists[paramToExternalFile][letters.toLowerCase()] = elements;
ajax_option_list_buildList(letters,paramToExternalFile);

}

function ajax_option_resize(inputObj)
{
ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + px;
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + px;
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

}

function ajax_showOptions(inputObj,paramToExternalFile,e)
{
if(e.keyCode==13 || e.keyCode==9)return;
if(ajax_list_currentLetters[inputObj.name]==inputObj.value)return;
if(!ajax_list_cachedLists[paramToExternalFile])ajax_list_cachedLists[paramToExternalFile] = new Array();
ajax_list_currentLetters[inputObj.name] = inputObj.value;
if(!ajax_optionDiv){
ajax_optionDiv = document.createElement(DIV);
ajax_optionDiv.id = ajax_listOfOptions;
document.body.appendChild(ajax_optionDiv);

if(ajax_list_MSIE){
ajax_optionDiv_iframe = document.createElement(IFRAME);
ajax_optionDiv_iframe.border=0;
ajax_optionDiv_iframe.style.width = ajax_optionDiv.clientWidth + px;
ajax_optionDiv_iframe.style.height = ajax_optionDiv.clientHeight + px;
ajax_optionDiv_iframe.id = ajax_listOfOptions_iframe;

document.body.appendChild(ajax_optionDiv_iframe);
}

var allInputs = document.getElementsByTagName(INPUT);
for(var no=0;no<allInputs.length;no++){
if(!allInputs[no].onkeyup)allInputs[no].onfocus = ajax_options_hide;
}
var allSelects = document.getElementsByTagName(SELECT);
for(var no=0;no<allSelects.length;no++){
allSelects[no].onfocus = ajax_options_hide;
}

var oldonkeydown=document.body.onkeydown;
if(typeof oldonkeydown!=function){
document.body.onkeydown=ajax_option_keyNavigation;
}else{
document.body.onkeydown=function(){
oldonkeydown();
ajax_option_keyNavigation() ;}
}
var oldonresize=document.body.onresize;
if(typeof oldonresize!=function){
document.body.onresize=function() {ajax_option_resize(inputObj); };
}else{
document.body.onresize=function(){oldonresize();
ajax_option_resize(inputObj) ;}
}

}

if(inputObj.value.length<minimumLettersBeforeLookup){
ajax_options_hide();
return;
}


ajax_optionDiv.style.top = (ajax_getTopPos(inputObj) + inputObj.offsetHeight + ajaxBox_offsetY) + px;
ajax_optionDiv.style.left = (ajax_getLeftPos(inputObj) + ajaxBox_offsetX) + px;
if(ajax_optionDiv_iframe){
ajax_optionDiv_iframe.style.left = ajax_optionDiv.style.left;
ajax_optionDiv_iframe.style.top = ajax_optionDiv.style.top;
}

ajax_list_activeInput = inputObj;
ajax_optionDiv.onselectstart = ajax_list_cancelEvent;
currentListIndex++;
if(ajax_list_cachedLists[paramToExternalFile][inputObj.value.toLowerCase()]){
ajax_option_list_buildList(inputObj.value,paramToExternalFile,currentListIndex);
}else{
var tmpIndex=currentListIndex/1;
ajax_optionDiv.innerHTML = ;
var ajaxIndex = ajax_list_objects.length;
ajax_list_objects[ajaxIndex] = new sack();
var url = ajax_list_externalFile + ? + paramToExternalFile + =1&letters= + inputObj.value.replace(" ","+");
ajax_list_objects[ajaxIndex].requestFile = url; // Specifying which file to get
ajax_list_objects[ajaxIndex].onCompletion = function(){ ajax_option_list_showContent(ajaxIndex,inputObj,paramToExternalFile,tmpIndex); }; // Specify function that will be executed after file has been found
ajax_list_objects[ajaxIndex].runAJAX(); // Execute AJAX function
}


}

function ajax_option_keyNavigation(e)
{
if(document.all)e = event;

if(!ajax_optionDiv)return;
if(ajax_optionDiv.style.display==none)return;

if(e.keyCode==38){ // Up arrow
if(!ajax_list_activeItem)return;
if(ajax_list_activeItem && !ajax_list_activeItem.previousSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.previousSibling,true);
}

if(e.keyCode==40){ // Down arrow
if(!ajax_list_activeItem){
ajax_options_rollOverActiveItem(ajax_list_optionDivFirstItem,true);
}else{
if(!ajax_list_activeItem.nextSibling)return;
ajax_options_rollOverActiveItem(ajax_list_activeItem.nextSibling,true);
}
}

if(e.keyCode==13 || e.keyCode==9){ // Enter key or tab key
if(ajax_list_activeItem && ajax_list_activeItem.className==optionDivSelected)ajax_option_setValue(false,ajax_list_activeItem);
if(e.keyCode==13)return false; else return true;
}
if(e.keyCode==27){ // Escape key
ajax_options_hide();
}
}


document.documentElement.onclick = autoHideList;

function autoHideList(e)
{
if(document.all)e = event;

if (e.target) source = e.target;
else if (e.srcElement) source = e.srcElement;
if (source.nodeType == 3) // defeat Safari bug
source = source.parentNode;
if(source.tagName.toLowerCase()!=input && source.tagName.toLowerCase()!=textarea)ajax_options_hide();
}

در نهایت فایل ajax-list.php خروجی درخواست را به صفحه کاربر می دهد:

<?php
$con = mysql_connect("localhost","root","");
mysql_select_db("words",$con);
if(isset($_GET[getword]) && isset($_GET[letters])){
$letters = mysql_real_escape_string($_GET[letters]);
//$letters = preg_replace("/[^a-z0-9 ]/si","",$letters);//for english words!
$res = mysql_query("select id,word from ajax_words where word like ".$letters."%")
or die(mysql_error());
//echo "1###select id,word from ajax_words where word like ".$letters."%|";
while($row = mysql_fetch_array($res)){
echo $row["id"]."###".preg_replace("/$letters/si","


1394/05/30 4:37:56 PM

نوشته شده توسط مجتبی شکوه

  نظرات شما  
   
نام:  
ن خانوادگی:  
تلفن:  
متن:  
   
   

    نظرات شما