Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > การ search แบบ ajax ครับ อยากให้พิมพ์ในช่องแล้วเริ่มค้นหาเลยครับ ไม่ต้องกด submit



 

การ search แบบ ajax ครับ อยากให้พิมพ์ในช่องแล้วเริ่มค้นหาเลยครับ ไม่ต้องกด submit

 



Topic : 075630

Guest




โค้ดเป็ฯแบบด้านล่างครับ ตอนนี้ คือพิมพ์ในช่องแล้วกด ปุ่มค้นหา ก็จะหาตามที่เราพิมพ์ แต่ ที่อยากทำคือ อยากให้พิมพ์แล้วมันค้นหาเลยทันทีโดยไม่ต้องกดปุ่ม submit ครับ ท่านใดพอช่วยเหลือผมได้บ้างครับ ไม่รู้ว่าใช่แบบ ajax หรือเปล่า ขอคำแนะนำด้วยครับ

Code (PHP)
<?
error_reporting(E_ALL ^ E_NOTICE);
session_start();
include "include/cnmysql.php";
$frmAction=$_POST["frmAction"];
$search=$_POST["search"];

if($search=="")
{$search=$_GET["search"];}

$page=$_GET["page"];
if($page==""){$page=1;}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IRBEAUTINA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/MyriadPro.font.js"></script>
<script type="text/javascript" src="js/ArialBold.font.js"></script>
<script type="text/javascript" src="js/jquery-func.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="css/images/iconir.jpg" />
<!--[if IE 6]><link rel="stylesheet" href="css/ie.css" type="text/css" media="all" /><![endif]-->

</head>
<body onLoad="document.form1.search.focus();">
<? include "header2012.php";?>
<form name="form1" method="post">
<div id="main">
  <div class="shell">
    <div class="box1">
		<? include "leftmenu2012.php";?>
		<div id="Bgnew">
			<div id="NewCol">
				<a href="#"><img class="img1" width="200px" height="140px" src="css/images/1pic1.jpg"/></a>
			</div>			
			<div id="fb-root"></div>
			<script>(function(d, s, id) {
  			var js, fjs = d.getElementsByTagName(s)[0];
  			if (d.getElementById(id)) return;
  			js = d.createElement(s); js.id = id;
  			js.src = "//connect.facebook.net/th_TH/all.js#xfbml=1";
  			fjs.parentNode.insertBefore(js, fjs);
			}(document, 'script', 'facebook-jssdk'));</script>
			<div class="fb-like-box" data-href="http://www.facebook.com/pages/IR-BEAUTINA/214147611982068" data-width="218" data-height="300" data-show-faces="true"            data-stream="false" data-header="true"></div>		
		</div>      
    </div>
    <div class="box3">
		<div class="ContentAb">
			<div class="Bannerpai">
            	
				<p style="padding:8px 0 0 30px;font-weight:bold;color:#ffffff;text-shadow:1px 0px 1px black">ท่านสามารถเห็น BV / PV ได้เมื่อ ล็อคอินแล้ว  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ค้นหาสินค้า  
				  <input name="search" type="text" id="search" value="<? echo $search;?>">
				<input class="copy" type="submit" onclick="goSearch()" value="ค้นหา" name="Submit">   เข้าสู่หน้าสมาชิก			</p>				
			</div>
			
		<br/><br/><table class="centerpi" border="1" width="650px">
  			<tr>
    			<th>รหัสสินค้า</th>
    			<th>ชื่อสินค้า</th>
		  <? if($_SESSION["hcode"]!=""){?>			
  			    <th>ราคา</th>
  			    <th>BV</th>
  			    <th>PV</th>
			<? }?>				
  			</tr>
		<?
			$i=0;
			
			if($search=="")
			{$sql="select * from product where productid like '%$search%' or productname like '%$search%' order by productid";}
			else{$sql="select * from product where productid like '%$search%' or productname like '%$search%' order by productid";}
			mysql_query("SET NAMES UTF8");
			
			$recordperpage=30;
			$result = mysql_query($sql);
			$totalrecord=mysql_num_rows($result);
			$totalpage = ceil($totalrecord / $recordperpage);
			$start_from = ($page-1) * $recordperpage;

			$sql=$sql." limit $start_from,$recordperpage";

			$result = mysql_query($sql);
			while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
			$i+=1;
			$description=$row["description"];
			
			if($i%2==0){$bgcolor="cacfcd";}
			else{$bgcolor="b5b8b7";}
		?>
 			 <tr>
    			<td width="63" bgcolor="#<? echo $bgcolor;?>"><? echo $row["productid"];?></td>
    			<td width="387"bgcolor="#<? echo $bgcolor;?>"><? echo $row["productname"];?></td>
		  <? if($_SESSION["hcode"]!=""){?>			
  			    <td width="55"bgcolor="#<? echo $bgcolor;?>"><? echo $row["price"];?>.-</td>
  			    <td width="57"bgcolor="#<? echo $bgcolor;?>"><? echo $row["bv"];?></td>
		        <td width="54"bgcolor="#<? echo $bgcolor;?>"><? echo $row["pv"];?></td>
		    </tr>
			<? }}?>				
	</table>
	<br/><div class="Navipro">
					<p class="Navifont"><? for ($i=1; $i<=$totalpage; $i++)
		  {		  	
		  	if($page!=$i){ echo "<a href=pricelist.php?&search=$search&page=$i>";}
			echo $i;
			if($page!=$i){ echo "</a>";}
			echo " | ";
			}?></p>
	</div><br/>
				<div class="clear1">
				</div>				
	  </div>
		</div>						 
	</div>     
    <div class="cl">&nbsp;</div>
</div>
</div>
</form>
<? include "footer2012.php";?></body>
</html>




Tag : PHP, MySQL, Ajax







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-03-16 11:10:25 By : onekisz View : 8507 Reply : 6
 

 

No. 1



โพสกระทู้ ( 437 )
บทความ ( 3 )



สถานะออฟไลน์


Code (PHP)
<script>
$(function(){   // เรียกใช้ตอนโหลดหน้าเสร็จ
  $("#searhbox").keyup(function(){          // ถ้ามี keyup ที่ input  ID = searchbox
        
       if($(this).val().length>3)     //  ถ้าค่าใน searchbox ยาวกว่า 3 
          {

           $.post("search.php",{key:$(this).val()},function(result){   ///  ส่งค่าไปที่  search.php แบบ post  ตัวแปร key เก็บค่า searchbox
             
               $("#resultDiv").html(result);   // เอาค่าที่ส่งกลับมา แสดงที่ element ที่มี id = resultDiv
             })  
         }else{
           
              return false;   // ถ้าค่าใน searchbox น้อยกว่า 3  ไม่ต้องทำไร

        }
   })

})

</script>







แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-16 11:25:39 By : randOmizE
 


 

No. 2

Guest


ขอโทษนะครับผม ขอถามต่อ แล้วโค้ดที่พี่ให้มา ผมต้องเอาไปใ้ต่อยังไงครับ มือใหม่อ่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-16 11:36:24 By : onekisz
 

 

No. 3



โพสกระทู้ ( 437 )
บทความ ( 3 )



สถานะออฟไลน์


เอาไปใช้แบบนี้ครับ

Code (PHP)
<html>
<head>
<title>test Ajax Post</title>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  // ดึง  jquery มา

<script>
$(function(){   // เรียกใช้ตอนโหลดหน้าเสร็จ
  $("#searhbox").keyup(function(){          // ถ้ามี keyup ที่ input  ID = searchbox
        
       if($(this).val().length>3)     //  ถ้าค่าใน searchbox ยาวกว่า 3 
          {

           $.post("search.php",{key:$(this).val()},function(result){   ///  ส่งค่าไปที่  search.php แบบ post  ตัวแปร key เก็บค่า searchbox
             
               $("#resultDiv").html(result);   // เอาค่าที่ส่งกลับมา แสดงที่ element ที่มี id = resultDiv
             })  
         }else{
           
              return false;   // ถ้าค่าใน searchbox น้อยกว่า 3  ไม่ต้องทำไร

        }
   })

})

</script>
</head>
<body>
<input type="text" id="searhbox">

<div id="resultDiv">ผลการค้นหาออกตรงนี้</div>

</body>
</html>



หน้า search.php

Code (PHP)
<?php

     echo $_POST['key'];   //รับค่า 
     /* จะทำอะไรต่อก็ ............... */
?>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-16 12:38:59 By : randOmizE
 


 

No. 4

Guest


แหะๆ แบบว่าเอาไปใช้แล้วทำไม่ได้ครับ แย่จัง TT_TT ผมใช้ไม่เปง
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-16 15:50:00 By : onekisz
 


 

No. 5



โพสกระทู้ ( 283 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ที่บอกว่าเอาไปใช้ไม่ได้ มีไฟล์ js/jquery-1.4.2.min.js" หรือยังครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-03-17 18:42:01 By : asustak
 


 

No. 6

Guest



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2014-04-25 14:38:04 By : aaa
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : การ search แบบ ajax ครับ อยากให้พิมพ์ในช่องแล้วเริ่มค้นหาเลยครับ ไม่ต้องกด submit
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่