جستجو [بایگانی] - برنامه نویس

View Full Version : جستجو

olampiad

سه شنبه 23 مهر 1392, 18:29 عصر

سلام
به این کد یه نگا بندازید.

<!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>index</title>
<script type="text/javascript">
var bb=['neda','maryam','farnoosh','negar'];
function mychange(ok){
alert(ok);
}
</script>
</head
><body>
<input type="text" onchange="mychange(this.value)" />
</body>
</html>

می خوام از روی آرایه bb جستجو کنم.
موقعی که یه کاراکتر کم و زیا شد سریعا بر طبق آن کلمه جستجو کند.و کلمات شبیه به آن را در جایی نمایش دهد.
در کل می خوام چیزی شبیه auto complete تو جی کوئری ui بسازم.
می شه یه راهنمایی کنید.
اگه یه راهنمایی کلی بکنبد خودم دنبالش می کنم و به سر نخی می رسم.
بی نهایت ممنون

Javidhb

سه شنبه 23 مهر 1392, 23:42 عصر

<input type="text" onkeyup="mychange(this.value)" />
<div id="results"></div>

var bb=['neda','maryam','farnoosh','negar'];
var resultsArray = new Array(); //ذخیره مواردی که با حروف مورد نظر شروع میشن - آرایه نتیجه
var results = document.getElementById('results'); //برای نشون دادن مقدارهای قابل قبول

function mychange(char)
{
//مقدار اینپوت رو با تک تک اعضای آرایه مورد نظر چک میکنه
bb.forEach(function(value, key){
// چک میکنه که مقدار داخل آرایه اصلی با مقدار تایپ شده در اینپوت شروع شده باشه
if(value.indexOf(char) == 0)
{
//اضافه کردن عبارت به آرایه نتیجه
resultsArray.push(value);
}
});

//بعد از تموم شدن چک کردن تمام عبارات این تابع صدا زده میشه
updateResults();
}

function updateResults()
{
//پاک کردن نتیجه های فعلی
results.innerHTML = '';

//عبارات داخل آرایه که شامل عبارت قابل قبول هست رو تک تک به صفحه اضافه میکنه
for(var i=0; i<resultsArray.length; i++)
{
results.innerHTML = results.innerHTML + '<br>' + resultsArray[i];
}

//پاک کردن آرایه و آماده شدن برای تایپ حرف بعدی
resultsArray = [];
}

بعنوان یه نمونه اولیه ... تا جایی که شد توضیحات فارسی رو نوشتم (با مصیبت.. توی ادیتور قاطی میشدن!)
اگه بازم توضیحات گنگ بود ... بگو تا بگم..

olampiad

سه شنبه 23 مهر 1392, 23:52 عصر

تشکر فراوان دارم
از اساتید عزیز که وقتشونو می زارن و راهنمایی می کنن.

olampiad

جمعه 26 مهر 1392, 13:15 عصر

تشکر فراوان از توضیحات
فقط به سوال داشتم
کار این توابع تو اینجا چیه؟
indexOf
و
push
بی نهایت ممنون

olampiad

جمعه 26 مهر 1392, 13:25 عصر

سلام
برای object چگونه می توان foreach نوشت.
من این کد رو نوشتم ولی کار نکرد

var tt={'name':'hamid','age':'18'};
tt.forEach(function(value, key){
alert(key);
})

olampiad

جمعه 26 مهر 1392, 13:43 عصر

لطفا به این کد یه نگا بندازید

<ul>
<li data-country="Ireland" title="GOLD">Colin Callaghan </li>
<li data-country="Finland" title="SILVER">Antti Ukkonen </li>
<li data-country="Canada" title="BRONZE">Ryan Gomes </li>
</ul>
</li>
<li>
<div>13 - Autobody Repair</div>
<ul>
<li data-country="Japan" title="GOLD">Yuichi Sawaki </li>
<li data-country="Denmark" title="SILVER">Nikolaj Vinther Buur-Mouridsen</li>
<li data-country="Chinese Taipei" title="SILVER">MIN-CHEN CHO</li>
<li data-country="United Kingdom" title="SILVER">Ross Varnam </li>
</ul>
</li>
<li>
<div>33 - Automobile Technology</div>
<ul>
<li data-country="Switzerland" title="GOLD">Flavio Helfenstein</li>
<li data-country="Japan" title="GOLD">Shota Takeda </li>
<li data-country="United Kingdom" title="BRONZE">John Couldridge </li>
</ul>
</li>

من تمام li هایی را که اتریبیوته data-country دارند رو با کد زیر تو متغیری قرار دادم.
حالا می خوام کاری کنم که مقدار data-country ها درون alert قرار بدم و نمایش بدم.
ولی بازم کار نمی کنه.
ممنون
اینم کدی که واسه نمایش نوشتم

var contry=document.querySelectorAll('li[data-country]');
contry.forEach(function(value, key){
alert(value);
})

olampiad

جمعه 26 مهر 1392, 13:52 عصر

سلام
بببخشین سوالات زیادی پرسیدم
من می خوام مقدار خصوصیات data-country و title هر li رو بهش اضافه کنم.
حالا چه طوری می تونم این کار رو بکنم.
یعنی الآن در حالت ثابت فقط محتوا درون li ها نمایش می دهد.
من می خوام data-country و title رو به li هام append کنم.
ممنون

Javidhb

جمعه 26 مهر 1392, 20:45 عصر

کار این توابع تو اینجا چیه؟
indexOf
و
push
indexOf :
توسط این متد می توانید یک حرف و یا یک کلمه را در داخل یک رشته جستجو کنید که اگر یک حرف باشد شماره موقعیت آنرا در رشته برمیگرداند و اگر کلمه باشد، فقط شماره موقعیت اولین کاراکتر آن کلمه را برمیگرداند. اگر هم پیدا نکند عدد منفی یک را برمیگرداند. حرف و کلمه مورد نظر برای جستجو را در پارامتر اول باید معین کنید و مشخص کردن این پارامتر هم اجباری است و می توانید از جایی که جاوااسکریپت جستجو را باید شروع کند در پارامتر دوم معین کنید که این پارامتر اختیاری است. فراموش نکنید که موقعیت کاراکتر اول هر رشته عدد صفر میباشد و همچنین حروف بزرگ با حروف کوچک هم فرق دارند
منبع (http://dadegostaran.com/elearning/elearn-javascript.html)
push:
افزودن یک یا چند عنصر به آرایه و برگرداندن تعداد مقادیر آرایه.
منبع (http://webgoo.ir/117/%D8%A2%D8%B1%D8%A7%DB%8C%D9%87-array-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-javascript)

برای object چگونه می توان foreach نوشت.

for(var index in object) {
if (object.hasOwnProperty(index)) {
var attr = object[index];
}
}

hasOwnProperty برای محکم کاری و مطمئن شدن از اینکه نره خصوصیاتی که توسط خود جاوااسکریپت بصورت اتوماتیک درست میشه رو بخونه.

Javidhb

جمعه 26 مهر 1392, 20:55 عصر

من تمام li هایی را که اتریبیوته data-country دارند رو با کد زیر تو متغیری قرار دادم.
حالا می خوام کاری کنم که مقدار data-country ها درون alert قرار بدم و نمایش بدم.
ولی بازم کار نمی کنه.
ممنون
اینم کدی که واسه نمایش نوشتم

var contry=document.querySelectorAll('li[data-country]');
contry.forEach(function(value, key){
alert(value);
})

var contry=document.querySelectorAll('li[data-country]');

//همیشه از این کد استفاده کنید
for(var i=0; i<contry.length; i++)
{
alert(contry[i].getAttribute('data-country'));
}

اگه میخاید از اتریبیوته یه المنت استفاده کنید پس باید اون attribute رو بگیرید، تو جاوااسکریپت باید از getAttribute استفاده کنید.