تماس با ما

موبایل: 2565 038 0912

دفتر تهران: 2565 2842 021

دفتر گرگان: 2565 3233 017


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

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

دریافت فایل

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

(نکته: این پیش نمایش بدون اتصال به پایگاه داده و صرفا جهت تست، شبیه سازی شده و ممکن است نسبت به کد اصلی، تفاوتهایی داشته باشد).
نحوه استفاده از لیست داینامیک پیشنهاد کلمات، مبتنی بر آژاکس، 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","<b>$letters</b>",$row["word"],1)."|";
}
}
?




 


سفارش طراحی سایت

سفارش طراحی سایت

google
yahoo
alexa
ebook
Baidu.com
Wikipedia
Blogger.com
Windows Live
Amazon.com
eBay
Bing
Ask
استانداری گلستان
f shdj, sefaresh, sefaresh .net, sefaresh.net, sthva, sthva nhj kj, sthva.kj, stthva.kj, xvhpd, آیفون, استفاده, اندروید, اپل, اپلیکیشن, اینترنت, باتری, بازار, خواهد, دستگاه, دوربین, سامسونگ, سفارش, سفارش دات نت, سفارش دات نت sefaresh.net, سفارش.نت, سیستم, طراح وب, طراحي وب سايت, طراحی, طراحی وب سایت, فناوری, مایکروسافت, موبایل, هوشمند, کاربران, کمپانی, گلکسی, گوشی, گوشی هوشمند, گوگل

نمایش تمامی تگ ها
بسته ویژه مدارس مدارس
بسته ویژه پزشکان پزشکان
بسته ویژه مهندسین مهندسین