M@hdi

تازه وارد
سلام

می خوام یه برگه درست کنم و یکسری مطالب داخلش بذارم و نیاز هست که کاربر بتونه بین کلمات جستجو کنه به همین دلیل نیاز دارم به یک کادر جستجو مثل Ctrl+F فایرفاکس که کاربر بتونه توی متن جستجو کنه.

کد زیر رو پیدا کردم ولی مشکل اینه که بعد از نوشتن کلمه مورد نظر باید کلید Alt رو یکبار فشار بدی و بعد روی دکمه جستجو کلیک کنید. می خواستم بدونم افزونه یا کدی (مثل Ctrl+F فایرفاکس) برای اینکار هست که درست کار کنه یا میشه همین کد رو درست کرد که دیگه نیاز به زدن کلید Alt نباشه؟

با تشکر

کد:
<html>

<body>

<script>
<!-- Hide from old browsers


/******************************************
* Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REMOVETHISyahoo.com)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
******************************************/

// revised by Alan Koontz -- May 2003

var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;


// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
// http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html

var nom = navigator.appName.toLowerCase();
var agt = navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = (agt.indexOf("msie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('netscape')!=-1)
var is_nav = (nom.indexOf('netscape')!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_mac = (agt.indexOf("mac")!=-1);
var is_gecko = (agt.indexOf('gecko') != -1);
var is_opera = (agt.indexOf("opera") != -1);


// GECKO REVISION

var is_rev=0
if (is_gecko) {
temp = agt.split("rv:")
is_rev = parseFloat(temp[1])
}


// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
// (SELF OR CHILD FRAME)

// If you want to search another frame, change from "self" to
// the name of the target frame:
// e.g., var frametosearch = 'main'

//var frametosearch = 'main';
var frametosearch = self;


function search(whichform, whichframe) {

// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)

if (is_ie4up && is_mac) return;

// TEST FOR NAV 6 (NO DOCUMENTATION)

if (is_gecko && (is_rev <1)) return;

// TEST FOR Opera (NO DOCUMENTATION)

if (is_opera) return;

// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES

if(whichform.findthis.value!=null && whichform.findthis.value!='') {

str = whichform.findthis.value;
win = whichframe;
var frameval=false;
if(win!=self)
{

frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];

}


}

else return; // i.e., no search string was entered

var strFound;

// NAVIGATOR 4 SPECIFIC CODE

if(is_nav4 && (is_minor < 5)) {

strFound=win.find(str); // case insensitive, forward search by default

// There are 3 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// strFound=win.find(str, false, false) is the explicit
// version of the above
// The Mac version of Nav4 has wrapAround, but
// cannot be specified in JS


}

// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)

if (is_gecko && (is_rev >= 1)) {

if(frameval!=false) win.focus(); // force search in specified child frame
strFound=win.find(str, false, false, true, false, frameval, false);

// The following statement enables reversion of focus 
// back to the search box after each search event 
// allowing the user to press the ENTER key instead
// of clicking the search button to continue search.
// Note: tends to be buggy in Mozilla as of 1.3.1
// (see www.mozilla.org) so is excluded from users 
// of that browser.

if (is_not_moz) whichform.findthis.focus();

// There are 7 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// wrapAround: boolean -- should we wrap the search?
// wholeWord: boolean: should we search only for whole words
// searchInFrames: boolean -- should we search in frames?
// showDialog: boolean -- should we show the Find Dialog?


}

if (is_ie4up) {

// EXPLORER-SPECIFIC CODE revised 5/21/03

if (TRange!=null) {

TestRange=win.document.body.createTextRange();



if (dupeRange.inRange(TestRange)) {

TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = win.document.body.scrollTop + TRange.offsetTop;
TRange.select();
}


}

else {

TRange=win.document.body.createTextRange();
TRange.collapse(false);
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}



}
}

if (TRange==null || strFound==0) {
TRange=win.document.body.createTextRange();
dupeRange = TRange.duplicate();
strFound=TRange.findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.body.scrollTop = TRange.offsetTop;
TRange.select();
}


}

}

if (!strFound) alert ("String '"+str+"' not found!") // string not found


}
// -->
</script>

<!-- EXAMPLE FORM OF FIND-IN-PAGE SEARCH USING SUBMIT (ALLOWING 'ENTER/RETURN' KEY PRESS EVENT) -->
<form name="form1" onSubmit="search(document.form1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>

</body>

</html>
 
آخرین ویرایش توسط مدیر:

caduspro

کاربر عضو
روش های بهتری هم است، من یک روش را بازگو می کنم که با کمی تغییرات می توانید به بهترین نتیجه ممکن برسید.

برای اینکه متن از کاربر گرفته و جستجو شود، نیاز به یک فرم ورودی خواهیم داشت که با کد زیر آن را ایجاد می کنیم:

<form id="live-search" action="" class="styled" method="post">
<fieldset>
<input type="text" class="text-input" id="filter" value="" />
<span id="filter-count"></span>
</fieldset>
</form>




برای جستجو و نمایش هم از جی کوئری استفاده می کنیم:

$(document).ready(function(){
$("#filter").keyup(function(){

// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;

// Loop through the comment list
$(".commentlist li").each(function(){

// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();

// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});

// Update the count
var numberItems = count;
$("#filter-count").text("Number of Comments = "+count);
});
});


در این کد، باکسی که در آن جستجو انجام می شود commentlist  بوده و هر تگ li را مورد هدف قرار می دهد. یعنی با این دستور بخش نظرات مورد جستجو قرار گیرد که آیا متن مورد نظر در نظرات قرار دارد یا خیر. اگر متن موجود نباشد ، تگ li یا اون نظر پنهان می شود و تنها دیدگاه li مورد نظر نمایش داده می شود.

منبع:

 
آخرین ویرایش توسط مدیر:

M@hdi

تازه وارد
سلام

از راهنمایی و توجه شما خیلی ممنونم

اما متاسفانه من مبتدی هستم و از کد نویسی سر در نمیارم.

کد بالا رو هم که گذاشتم به خاطر این بود که توی یه سایت خارجی پیداش کردم و خیلی راحت با کپی کردنش بالای نوشته ها یه کادر جستجو بهم داد فقط مشکلش زدن کلید Alt بعد از تایپ واژه مورد نظره.

از شما هم متشکرم و درک می کنم که شما زحمت کشیدید و می خواستید روش بهتری رو بهم معرفی کنید اما متاسفانه من کد نویسی بلد نیستم.

اگر زحمت بکشید و بفرمایید که آیا راه ساده تر یا کدی که با یه کپی پیست مثل همون کدی که گذاشتم معرفی بفرمایید واقعا ممنون می شم.

با تشکر از شما

 
بالا