parsgreen.com
article

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

ajax-dynamic

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

از این کد می توانید به فرض در یک دیکشنری آنلاین برای پیشنهاد کلمات به صورت یک لیست بازشونده استفاده کنید، یا وقتی کاربر به دنبال عبارتی است، با این کار او را راهنمایی کنید و خیلی ایده های جالب دیگر که می توان با آن انجام داد، این نوع قابلیت ها به نام 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","<b>$letters</b>",$row["word"],1)."|";
}
}
?>
sectionدسته بندی: آموزش کاربردی » Ajax
related مطالب بیشتر:
» ساخت قابلیت امتیازدهی با PHP و Ajax
» نمایش نتایج پایگاه داده و فایل php با آژاکس (ajax)
» نمایش زنده آمار و اطلاعات با آژاکس (Ajax)
» نمایش داینامیک و صفحه به صفحه مطالب با آژاکس
» اعتبار سنجی همزمان فرم با آژاکس (ajax) و php
commentنظرات (۱۹ یادداشت برای این مطلب ارسال شده است)
نویسنده: محمود
زمان: ۱۱:۲۴:۴۸ - تاریخ: ۱۳۹۱/۰۶/۱۴
خیلی خیلی ممنون از مطلب مفیدتون
نویسنده: محمدرضا
زمان: ۱۷:۱۳:۵۴ - تاریخ: ۱۳۹۱/۱۲/۰۹
با سلام . ممنون از مطالب بسیار مفیدتون.
من با jquery ui خواستم auto complate بسازم. دقیقا مثل همین آموزش.
ولی 1 تا سوال پیش اومده :
1- چجوری میتونم به کلمات پیشنهادی که نشون میده لینک بدم و وقتی انتخاب کردیمشون بره به اون لینک؟
کد :
<?php require_once('Connections/cn.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_cn, $cn);
$query_Recordset1 = "SELECT * FROM ne_pezeshk ORDER BY id DESC";
$Recordset1 = mysql_query($query_Recordset1, $cn) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link href="jquery-ui/css/start/jquery-ui-1.10.1.custom.css" rel="stylesheet">
<script src="jquery-ui/jquery-1.9.1.js"></script>
<script src="jquery-ui/jquery-ui.js"></script>
<script>
$(function() {
var availableTags = [

<?php /*
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"*/

$i=0;
do{
if($i==0)
{
$to = "\"".$row_Recordset1['id']."\"";
}
else
{
$to .= ","."\"".$row_Recordset1['id']."\"";
}

$i++;
}while($row_Recordset1 = mysql_fetch_assoc($Recordset1));
echo $to;
?>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
<?php
mysql_free_result($Recordset1);
?>
منبع :
http://jqueryui.com/autocomplete
پاسخ: 
سلام
ظاهرا این کد آنظور که می خواهید قابل تغییر نیست و اگر هم باشد باید در فایل jquery-ui.js خط مربوطه را بیابید و تغییرات را اعمال کنید، قسمت های احتمالی را بررسی کردیم ولی موردی که به خروجی کد ارتباط داشته باشد پیدا نشد، در نمونه ها و آموزش های سایت منبع هم چیزی در این رابطه توضیح داده نشده است.
نویسنده: M9
زمان: ۱۰:۵۳:۵۵ - تاریخ: ۱۳۹۱/۱۲/۲۲
سلام.
با تشکر از لطف شما...
نویسنده: محمد مهدی
زمان: ۱۱:۱۱:۰۳ - تاریخ: ۱۳۹۲/۰۵/۲۹
با سلام و خسته نباشید
مواردی که در سایت شما بیان شده فوق العاده کاربردی و موثر بوده و من به شخصه خیلی استفاده کردم و خیلی منو از فشارهای روحی ناشی از برنامه در اورده منتهی یه خواهش دارم و اون اینکه لطف کنید بجای جاوا اسکریپت برنامه هاتون رو با جی کوئری بزارید تا بروزتر باشه
خیلی خیلی از زحمات و کمک هایی که به واسطه برنامه هاتون داشتید متشکرم
پاسخ: 
سلام
خود جی کئوری یک فریم ورک جاوا اسکریپتی است، یعنی پایه و اساس آن جاوا اسکریپت است، صرفا به جهت اینکه برای عموم کابرد آسان تری دارد، بیشتر مورد استقبال کاربران قرار می گیرد، اما معایبی نیز دارد، مهمتر از همه اینکه متکی بر یک کتابخانه حجیم است که در هر نسخه بر میزان آن افزوده می شود!
جاوا اسکریپت یک زبان استاندارد اسکریپت نویسی برای وب است و به کتابخانه ای وابسته نیست، توسعه دهنده گان وب معمولا تمایل دارند کدها را از پایه، سبک و مستقل از کتابخانه یا فریم ورک ها بنویسند، با این تفاسیر استفاده از جی کئوری به معنی به روز بودن و در مقابل نوشتن کدها به جاوا اسکریپت به معنی به روز نبودن نیست!
نویسنده: یاسمن
زمان: ۱۴:۵۳:۰۲ - تاریخ: ۱۳۹۲/۰۹/۱۷
سلام ممنون از آموزشهای بسیار مفیدتون ... من کد شما رو دقیقا اجرا کردم ولی اولا توی جدول ajax _words کلمه ها فارسی وارد نشد عجیب غریب وارد شد من خودم دستی توی جدول کلمه 1 تا کلمه 5 رو وارد کردم ولی تو برچسب انتخاب وقتی فارسی مینویسم چیزی برای پیشنهاد دادن نداره یک کلمه ی انگلیسی وارد جدول کردم وقتی حرف اولش رو زدم فهمید و پیشنهاد داد شما گفتین مشکل فارسیش رو برطرف کردین ولی برای من فارسی رو نمیفهمه اگه میشه راهنماییم کنید من باید کجا رو تغییر بدم که این مشکل برطرف بشه خیلی ممنون
پاسخ: 
سلام
اینکه کلمات به صورت ناخوانا در دیتابیس ذخیره می شوند مشکل و مهم نیست، در هنگام نمایش به صورت فارسی دیده می شوند، منتها باید به چند نکته دقت کنید، صفحه شما باید متاتگ زیر را داشته باشد:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
همچنین Collation دیتابیس و جداول باید utf8_general_ci باشد.
به هر صورت کدها مجددا تست و مشکلی از این نظر دیده نشد.
نویسنده: یاسمن
زمان: ۱۸:۵۵:۵۸ - تاریخ: ۱۳۹۲/۰۹/۱۷
سلام واقعا ممنون که اینقدر سریع جواب میدید (:
راستش مشکل قبلیم هنوز برطرف نشده ولی یک مشکل جدی تر برام پیش اومده که واقعا راهی براش ندارم ممنون میشم اگه فقط تو این مورد کمکم کنید قول میدم دیگه سوال نکنم (: من یک فرم جست و جوی مقالات دارم که میخوام کاربر وقتی یک عبارتی رو در جعبه متن وارد میکنه مشابه های اون عبارت تو پایگاه داده رو بهش پیشنهاد بده یک لیست کشویی هم دارم که سه گزینه داره و به کاربر امکان جست و جو بر اساس عنوان مقاله ، نام نویسنده و سال انتشار رو میده من میخوام اگه کاربر جست و جو براساس عنوان مقاله رو انتخاب کرد از جدول مقالات عنوان های مشابه رو پیدا کنه و پیشنهاد بده و اگه براساس نام نویسنده رو انتخاب کرد از جدول نویسنده نامهای مشابه رو پیدا کنه و... ولی کدی که من دارم جستجو بر هر اساسی که باشه پیشنهادات رو براساس عنوان مقاله میده ): من خودم فکر می کنم اگه بتونم تو صفحه ajax-list.php به مقدار لیست کشویی یعنی [post[article_$ دسترسی داشته باشم میتونم با گذاشتن شرط مشکل رو حل کنم ولی با session امتحان کردم نشد راه دیگه ای هم برای دسترسی به مقدار لیست کشویی بلد نیستم! ببخشید که اینقدر طولانی شد. کدها هم براتون میذارم:
صفحه search : فقط قسمت فرمش رو گذاشتم که کدها طولانی نشه
<form action="search.php" method="POST" >
<p style="direction:rtl;text-align:center;"> <input type="text" name="textField" id="textField" maxlength="50" size="20" onkeyup="ajax_showOptions(this,'getword',event)" value= <?php echo $_key[2] ?>/></p>
<input type="hidden" id="word_hidden" name="word_id" />

<p style="direction:rtl;text-align:center;">جست و جو بر اساس :</p>
<p style="direction:rtl;text-align:center;"><select name="article">
<option value="name">نام نویسنده</option>
<option value="title" selected>عنوان مقاله</option>
<option value="year">سال انتشار</option>
</select></p>

<p style="direction:rtl;text-align:center;">نوع مقاله :</p>
<p style="direction:rtl;text-align:center;"><select name="articletype">
<option value="'confurance'">کنفرانس</option>
<option value="'jornal'" selected>ژورنال</option>
<option value="'confurance'||'jornal'">هر دو</option>
</select></p>

<p style="direction:rtl;text-align:center;"><input type="submit" name= "submit" value="جست وجو"/></p>
</form>
صفحه ajax-list
<?php
//session_start();
//$article=$_SESSION['article'];
$con = mysql_connect("localhost","root","");
mysql_select_db("scientific_article",$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!
//if($article=='title'){
$res = mysql_query("select * from `articles` where `title` 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["articlecode"]."###".preg_replace("/$letters/si","<b>$letters</b>",$row["title"],1)."|";
}
//}
}
?>
کامنتهای این صفحه برای دسترسی به مقدار لیست کشوییه که جواب نداد ):
پاسخ: 
سلام
مشخص نیست به چه دلیل برای این مورد از نشست استفاده کرده اید؟! دریافت پارامترها از فرم باید از طریق متد POST (یا GET) انجام شود، اما نکته اصلی اینجاست که مورد مد نظر شما یک پروژه کوچک پیچیده است که به نظر حداقل باید برای طراحی تئوری آن یک تا دو ساعت وقت گذاشت! کدهای حاضر با توجه به نوع نیاز شما به صورت مستقیم کاربردی نخواهند داشت و باید از نوع بازنویسی شوند، به طور مثال بخش مورد استفاده در پرس وجو باید به صورت داینامیک و با توجه به انتخاب های کاربر تغییر کند.
نویسنده: فاطمه
زمان: ۱۸:۴۸:۴۰ - تاریخ: ۱۳۹۲/۱۱/۲۶
با سلام
ببخشید من تمام کدهایی را که شما گفته بودید به کار بردم ، پایگاه داده words را ایجاد کردم و دستورات mysql را هم در آن اجرا کردم .
اما لیست کشویی باز می شود اما هیچ عبارتی در آن نیست.
پاسخ: 
سلام
احتمالا یونیکد جداول شما تنظیم نیست، کد تست شده و موردی ندارد، لذا روش شما باید بررسی شود، شاید اشتباهی (هر چند کوچک) کرده باشید.
نویسنده: ابوالفضل
زمان: ۱۰:۳۵:۳۱ - تاریخ: ۱۳۹۲/۱۱/۲۹
سلام
من این کد را تست کردم همه چیز خوب است اما:
من خودم یک جدول دیگه در دیتابیس دارم که کلمات به صورت فارسی در اون قرار گرفته و یونیکد جدول هم utf8_general_ci هستش متاسفانه با متصل کردن به جدول خودم هیچ کلمه ای پیشنهاد داده نمی شود اما زمانی که به جدول ساخته شده توسط این آموزش متصلش می کنم کد خوب جواب میده جدولی که توسط کدهای شما ایجاد می شود حروف فارسی را کد کرده است اما در جدول ما حروف فارسی خوانا هستند لطف کنید اگر امکانش هست راهنمایی نمایید

نمیشه این کادر پیشنهاد کلمه که الان در زیر باکس نمایش داده می شود در بالای باکس نمایش داده شود؟

ممنون میشم راهنمایی بفرمایید
پاسخ: 
سلام
اگر کلمات به صورت فارسی در دیتابیس ذخیره شده اند، در هنگام اجرای دستورات MySQL و پس از اتصال، پرس و جوی زیر را نیز اجرا کنید:
mysql_query ("SET NAMES 'utf8' ");
احتمالا مشکل حل می شود، در مورد تغییر نحوه نمایش باید با CSS آشنا باشید، متاسفانه امکان تمرکز و توسعه بیش از این بر روی آموزش فعلی نیست.
نویسنده: ابوالفضل
زمان: ۰۰:۲۸:۰۶ - تاریخ: ۱۳۹۲/۱۱/۳۰
سلام
ممنون مشکل حل شد
نویسنده: reza
زمان: ۱۳:۵۶:۳۶ - تاریخ: ۱۳۹۳/۰۲/۲۳
با سلام
چکار باید کرد که پس از جستجو کلمه، وقتی روی اون کلمه کلیک کنیم کاربر به صفحه دلخواه هدایت شود.
مثلا: در گوگل وقتی گوگل کلمه ای رو پیشنهاد می کنه و ما روی اون کلمه کلیک می کنیم (بدون اینکه روی دکمه سرچ کلیک کنیم) گوگل ما را به صفحه مورد نظر هدایت می کنه.
با تشکر
پاسخ: 
سلام
توضیح مطلب ساده نیست! باید برنامه نویسی سمت سرور (مانند PHP) بلد باشید، در این صورت می توانید لینک های جستجوی پیشنهادی را به صورت داینامیک ایجاد کرده و پارامترهای مورد نظر را در آن خروجی دهید، بدین ترتیب پارامترها از طریق متد GET قابل دریافت خواهند بود (این یک بحث تخصصی است و امکان توضیح ساده تر آن وجود ندارد!)
نویسنده: reza
زمان: ۱۶:۴۵:۲۳ - تاریخ: ۱۳۹۳/۰۲/۲۳
با سلام
فکر کنم منظور من را درست متوجه نشده باشید.
منظورم این بود که به جای اینکه روی دکمه سرچ کلیک کنیم تا ما را به صفحه ای ببرد ، با کلیک بر روی کلمه پیشنهادی ما را به صفحه ای ببرد.
شاید مثال گوگل مثال خوبی نبود.
مثال درست تر آن مثل سایت ویکی پدیا .
وقتی کلمه را جستجو می کنید یک سری لیست کلمه پیشنهادی برای شما باز می شود و با کلیک کردن روی آن کلمه یا زدن دکمه enter به آن صفحه هدایت میشوید.
توجه کنید که اینجا کد php مطرح نیست.
(((هدف فقط این است که به جای زدن دکمه سرچ و ارسال پارامتر ، بدون زدن دکمه سرچ و با کلیک کردن روی کلمه پیشنهادی پارامتر ارسال شود.)))
امیدوارم منظورم را درست متوجه شده باشید.
با تشکر
پاسخ: 
سلام
منظورتان را متوجه شده ایم و پاسخ قبلی هم در همین رابطه بود، باید لینکی بسازید که در آن پارامترها به صورت متد GET تنظیم شده باشند، به طور مثال وقتی در فیلد جستجوی سایتی عبارت "test" را وارد و بر روی دکمه کلیک کنید، آدرس در مرورگر به شکل نمونه زیر خواهد بود:
yoursite.com/?search=test
حال می توانید با تگ a و href نیز این لینک را ایجاد کنید تا با کلیک کاربر، مرورگر آدرس فوق را به سرور ارسال کنید:
<a href="yoursite.com/?search=test">test</a>
در واقع تفاوتی نمی کند که با فرم و دکمه این کار را انجام دهید یا با لینک ساده، مهم پارامترها است که باید از طریق متد GET ارسال و دریافت شود.
نویسنده: reza
زمان: ۲۲:۵۵:۰۳ - تاریخ: ۱۳۹۳/۰۲/۲۳
با سلام
شما در جواب بالا گفته اید که:
((به طور مثال وقتی در فیلد جستجوی سایتی عبارت "test" را وارد و بر روی دکمه کلیک کنید....))
ولی منظور ما جمله زیر است:
((به طور مثال وقتی در فیلد جستجوی سایتی عبارت "test" را وارد و بر روی کلمه test کلیک کنید....))
ما به طور کامل بر زبان php و متد get و post آشنایی داریم و مشکل ما از php نیست.
مشکل با کد جاوا اسکریپت است یعنی کدی را می خواهیم که:
{{{با کلیک روی کلمه پیشنهادی بعد از چند ثانیه
فرم به طور خودکار ارسال شود یعنی همان auto submit}}}
فقط نیاز به یک کد جاوا داریم که بعد از کلیک روی کلمه ، فرم به طور اتوماتیک ارسال شود .
(اگر باز هم منظور ما را متوجه نشده اید به سایت ویکی پدیا بروید)
هدف از کدی که می خواهیم صرفا راحت کردن کار کاربر می باشد یعنی می خواهیم کاربر بعد از انتخاب کلمه ،دیگر روی دکمه کلیک نکند یعنی همان انتخاب کلمه کار دکمه را انجام دهد.
با تشکر
پاسخ: 
سلام
برای حالت کلیک می توانید از نمونه زیر استفاده کنید، اما برای کنترل آن با صفحه کلید نیاز به نوشتن توابع پیچیده تری است:
<script type="text/javascript">
function submitForm(form, input, value){
document.getElementById(input).value = value;
document.getElementById(form).submit();
return true;
}
</script>
<form name="myform" id="myform" action="index.php" method="get">
<input type="text" name="search" id="search">
<input type="submit" value="ارسال">
</form>
<a href="javascript:void(0);" onclick="submitForm('myform', 'search', 'test')">test</a>
نویسنده: zahra yavari
زمان: ۱۴:۳۰:۵۲ - تاریخ: ۱۳۹۳/۰۳/۰۲
سلام
من این کارها را انجام دادم اما مشکلی که داره اینه که بعد که از لیست انتخاب میشه چیزی برام چاپ نمیشه
یعنی میخوام اطلاعات اون صفحه رکوردی که انتخاب شد برام چاپ بشه؟؟
منظورتون از کلمه ی 1 و 2 و... چیه؟؟
و اینکه من خودم دستی دیتابیس را ساختم.. ایا نیازه اون فایل ها ی sql را دوباره وارد کرد؟؟
پاسخ: 
سلام
اینها صرفا نمونه کلماتی فرضی هستند جهت تست اسکریپت، هدف این کد این است که کلماتی را از دیتابیس به عنوان پیشنهاد به کاربر نمایش دهد تا کار او را در انتخاب یک مورد راحت تر کند، سایر موارد مانند چاپ و... بستگی به نحوه استفاده شما از پارامتر ارسالی کاربر دارد و اینکه چگونه با PHP و MySQL کدنویسی و کار کنید (این آموزش صرفا در رابطه با نحوه طراحی لیست پیشنهادی است و برنامه نویسی PHP و پرس و جوهای MySQL را باید در جای خودش فرا گرفته و با این کد ترکیب کنید).
نویسنده: zahra yavari
زمان: ۱۰:۱۳:۰۷ - تاریخ: ۱۳۹۳/۰۳/۰۳
سلام
با تشکر از شما
میشه بیشتر راهنمایی کنید؟؟ که از چه دستوراتی استفاده کنم؟
پاسخ: 
سلام
باید با نحوه دریافت و مدیریت مقادیر از طریق متد POST در PHP و همچنین اجرای پرس و جوهای دیتابیس مانند استفاده از SELECT و LIKE آشنا باشید (در کل باید مقدمات کار را قبلا فرا بگیرید).
نویسنده: علی
زمان: ۲۰:۲۵:۵۹ - تاریخ: ۱۳۹۳/۱۰/۱۹
سلام
یک سوال داشتم؟
الان فکر کن در فیلد جستجو یک کلمه نوشتم و برام لیست کرده اطلاعات رو خونده از بانک حالا میخوام تعریف کنم وقتی رو یکی از رکوردها کلیک شد به یک لینک بره و اون لینکم از بانک بخونه
مثلا رو یک رکورد کلیک کرد بره به
www.site.com/search/id
بجای id بیاد ستون ای دی رو از بانک بخونه
لطفا کمک کنید
با تشکر
پاسخ: 
سلام
انجام این کار خیلی سخت نیست! کافی است کمی با PHP کار کرده باشید، در این صورت در فایل ajax-list.php در هنگام چاپ خروجی، می توانید عبارت مورد نظر را در تگ a href چاپ کنید، به فرض:
 while($row = mysql_fetch_array($res)){
echo $row["id"]."###".preg_replace("/$letters/si", "<a href=\"www.site.com/search/$id\"><b>$letters</b></a>", $row["word"], 1)."|";
}
نکته: کد تست نشده!
paged صفحه 1 از 2




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

2 × 4
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...