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,038

HOME > PHP > PHP Forum > TIP: jQuery Auto suggession+PHP+Mysql+CSS


[PHP] TIP: jQuery Auto suggession+PHP+Mysql+CSS

 
Topic : 080992



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



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


Default.php

Code (PHP)
view source
print?
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<!-- libs jQuery -->
05.<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
06.<!-- CSS -->
07.<link rel="stylesheet" type="text/css" href="style.css" />
08. 
09.<title>jQuery&nbsp;suggession</title>
10.<meta charset="UTF-8" />
11. 
12.</head>
13. 
14.<body>
15.<h4>Monster&nbsp;team.</h4><hr />
16.<div id="frm_app" align="center">
17.<form name="Myfrm" id="Myfrm">
18.    <label>Search:</label>
19.    <input type="text" name="txt_src" id="txt_src" onblur="setTimeout('unfocus()', 200);" /><br />
20.    <div id="result"></div>
21.</form>
22.</div>
23.<script type="text/javascript">
24.$(document).ready(function(){
25.    $('#result').hide();
26. 
27.    $('#txt_src').keyup(function(){
28.        var txt_src = $('#txt_src').val();
29.        if(txt_src != ""){
30.            $.get('server.php', {qrstr : txt_src}, function(data){ 
31.            if(data != ""){
32.                $('#result').fadeIn(200).html(data);
33.                //$('#result').show().html(data);
34.            }else{
35.                $('#result').hide();
36.            }
37.                 
38.            });
39.        }else{
40.                $('#result').hide().html('');
41.        }
42.         
43.    });
44.});
45. 
46./* Add_val*/
47.function Add_val(data){
48.    $('#txt_src').val(data);
49.    $('#result').hide().html('');
50.}
51. 
52.function unfocus(){
53.    $('#result').fadeOut(200).html('');
54.    //$('#result').hide().html('');
55.}
56.</script>
57.</body>
58.</html>


style.css

body{font-family:Arial; font-size:12px;}
h4{color:#F00; text-align:right;}
div#fmr_app{}
form{margin-top:5px;}
label{font-weight:bold; width:150px; display:inline-block; text-align:right;}
input{width:400px; border:solid 1px #CCC;}
input:focus{border:solid 1px #F90; background-color:#FFFFCC;}
div#result{width:400px; border:solid 1px #CCC; margin-top:3px;position:absolute;left:560px; text-align:left;}
div#data:hover{width:100%;background-color:#CCC;text-decoration:underline;cursor:pointer;}

Code (PHP)
view source
print?
01.<?php
02./* Connect to databases*/
03.$link = mysql_connect('localhost', 'root', '1234') or die (mysql_error());
04.$sel_db = mysql_select_db('ajax_suggession', $link);
05. 
06./* Select data from table */
07.$sql = "SELECT * FROM suggession WHERE Title_Suggession LIKE '".$_GET["qrstr"]."%'";
08.$qr = mysql_query($sql);
09.while($fetch = mysql_fetch_assoc($qr)){
10.    echo "<div id=\"data\" onclick=\"Add_val('".$fetch["Title_Suggession"]."');\">&nbsp;".$fetch["Title_Suggession"]."</div>";
11.}
12.?>


Code
CREATE TABLE `suggession` (
`Id_Suggession` int(5) NOT NULL auto_increment,
`Title_Suggession` varchar(255) collate utf8_unicode_ci NOT NULL,
PRIMARY KEY (`Id_Suggession`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=11 ;

--
-- Dumping data for table `suggession`
--

INSERT INTO `suggession` VALUES (1, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (2, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (3, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (4, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (5, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (6, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (7, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (8, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (9, 'Geidtiphong Singseewo');
INSERT INTO `suggession` VALUES (10, 'Geidtiphong Singseewo');





หวังว่าจะเป็นประโยชน์นะครับ



Tag : PHP, Ajax, jQuery
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-07-12 22:03:00 By : popnakub View : 1350 Reply : 7
 

 

No. 1



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



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

ทดสอบแล้วกับ FF, Chrome, IE9 ไม่ปัญหาครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-12 22:12:33 By : popnakub
 

 

No. 2



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

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

แจ่มครับ ถ้าให้ดี Capture ภาพ SS มาด้วยก็ดีครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-12 23:20:44 By : mr.win
 

 

No. 3



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



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

suggession

ตัวอย่างครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-13 09:38:04 By : popnakub
 

 

No. 4



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

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


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-13 21:32:35 By : mr.win
 

 

No. 5



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



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

ขอโทษนะครับที่ไม่ได้ทำ บทความเพราะบางทีผมทำเสร็จแล้วก็ อัพเลย หลายอย่างผมได้จาก youtube และ google ครับ ก็เลยทำๆ และก็อัพเลยอยากให้ได้ประโยชน์กันครับ ถ้าว่างจะทำ VDO มาฝากครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-13 23:10:18 By : popnakub
 

 

No. 6



โพสกระทู้ ( 74,059 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

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

เยี่ยมครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-14 07:26:42 By : mr.win
 

 

No. 7



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



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

VDO jQuery : auto suggession
http://www.youtube.com/watch?v=OhT5797fIMw&feature=youtu.be
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-07-15 14:59:58 By : popnakub
 

   

ค้นหาข้อมูล
   
 

แสดงความคิดเห็น
Re : TIP: jQuery Auto suggession+PHP+Mysql+CSS
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ 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 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





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