SiamWebCity.com รับสร้างเว็บไซต์ครบวงจร
เลือกภาษา ภาษาอังกฤษ   
หน้าแรก
web
โปรโมทเว็บ
web
รับทำเว็บไซต์
web
สอนทำเว็บ
web
Domain 299บ.
web
ติดต่อเรา
web
 
รับทำเว็บไซต์ครบวงจร รับพัฒนาแอพพลิเคชั่น สำหรับ Facebook iPad iPhone Android รับอบรมการสร้างเว็บไซต์ โปรโมทเว็บไซต์ ดูแลเว็บไซต์ แก้ไขเว็บไซต์ : เริ่มต้นติดต่อที่เรา ที่เหลือเราเป็นผู้จัดการเพื่อท่าน : เราเป็นมากกว่าเครื่องมือที่ช่วยฝ่าวิกฤตเศรษฐกิจ
รายการ
เกี่ยวกับเรา
ทำไมต้องเลือกเรา
ผลงานที่ผ่านมา
เตรียมตัวก่อนทำเว็บ
รับดูแลเว็บไซต์
แอพ Facebook iPhone
โปรแกรมmlm สำเร็จรูป
เช่าโฮสติง
บริการหลังการขาย
เงื่อนไขการรับบริการ
ร่วมงานกับเรา
คำถามที่พบบ่อย
ติดต่อเรา

ฟรีบทความ
คู่มือการใช้งาน  คู่มือการใช้งาน
VDO สอน Dreamweaver  VDO สอน Dreamweaver
Bitcoin บิทคอยน์  Bitcoin บิทคอยน์
PHP MySQL  VDO  เบื้องต้น  PHP MySQL VDO เบื้องต้น
PHP MySQL  เกร็ดความรู้  PHP MySQL เกร็ดความรู้
jQuery  jQuery
HTML5  HTML5
ASP net   MS SQL  ASP net MS SQL
facebook app  facebook app
JSP  JSP
Oracle  Oracle
CSS  CSS
Google  Google
iphone ipad iphone itune ios  iphone ipad iphone itune ios
SEO  SEO
SQL Server  SQL Server
AJAX  AJAX
รดน้ำอัตโนมัติ  สปริงเกอร์  รดน้ำอัตโนมัติ สปริงเกอร์
คอมพิวเตอร์   อินเตอร์เน็ต  คอมพิวเตอร์ อินเตอร์เน็ต
JavaScripts  JavaScripts
cloud computing  cloud computing
xhtml  xhtml
Photoshop  Photoshop
RSS Feed  RSS Feed
wordpress  wordpress
Computer  Computer
MLM ขายตรง ขยายสายงาน  MLM ขายตรง ขยายสายงาน
NUTT's blog  NUTT's blog
ทีวีดิจิตอล DVB T2  ทีวีดิจิตอล DVB T2
Bootstrap CSS  Bootstrap CSS

รับสอน PHP, MySQL, HTML, CSS, Javascripts, FTP, Dreamweaver,PHPMyAdmin, Appserv, WMSEVER, php-Nuke , Joomla, SMF, Oscommerce, Phpbb, Paypal, Adwordsมาเรียนการสร้างเว็บกัน
บริการสอน แนะนำ Adwords , PHP, MySQL, HTML, FTP, SMF, PHPMyAdmin, Dreamweaver, Oscommerce, Photoshop, Flash...

test speed
Display Pagerank
ดูสถิติเว็บไซต์

การค้นหาด้วย jQuery กับ php | Simple search with PHP, jQuery and MySQL



jQuery > การค้นหาด้วย jQuery กับ php | Simple search with PHP, jQuery and MySQL


You can see the demo for this tutorial here.

The best way to keep your web site visitors, is to help them find what they are looking for. If you manage to do it in a simple and beautiful way, their feeling of loyalty will increase and they will come back and search for more great articles.

I will show you how to build a simple, yet powerful, search form from which you will show your users search results without refreshing the page, giving your web site a nice touch.

I will create two files: search.php which will contain HTML and JavaScript and do_search.php which will contain the PHP side. First, our HTML and jQuery file:



  Code
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>PHP, jQuery search demo</title>
<link rel=stylesheet type=text/css href=my.css>

<script type=text/javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js></script>
<script type=text/javascript>

$(function() {

$(.search_button).click(function() {
// getting the value that user typed
var searchString = $(#search_box).val();
// forming the queryString
var data = 'search='+ searchString;

// if searchString is not empty
if(searchString) {
// ajax call
$.ajax({
type: POST,
url: do_search.php,
data: data,
beforeSend: function(html) { // this happens before actual call
$(#results).html('');
$(#searchresults).show();
$(.word).html(searchString);
},
success: function(html){ // this happens after we get results
$(#results).show();
$(#results).append(html);
}
});
}
return false;
});
});
</script>

</head>
<body>
<div id=container>
<div style=margin:20px auto; text-align: center;>
<form method=post action=do_search.php>
<input type=text name=search id=search_box class='search_box'/>
<input type=submit value=Search class=search_button /><br />
</form>
</div>
<div>

<div id=searchresults>Search results :</div>
<ul id=results class=update>
</ul>

</div>
</div>

</body>
</html>



It is a normal HTML form that will do the POST to our back end file do_search.php.
For explaining the jQuery part, please read the comments above.

And here is our do_search.php:


  Code
<?php
//if we got something through $_POST
if (isset($_POST['search'])) {
// here you would normally include some database connection
include('db.php');
$db = new db();
// never trust what user wrote! We must ALWAYS sanitize user input
$word = mysql_real_escape_string($_POST['search']);
$word = htmlentities($word);
// build your search query to the database
$sql = SELECT title, url FROM pages WHERE content LIKE '% . $word . %' ORDER BY title LIMIT 10;
// get results
$row = $db->select_list($sql);
if(count($row)) {
$end_result = '';
foreach($row as $r) {
$result = $r['title'];
// we will use this to bold the search word in result
$bold = '<span class=found>' . $word . '</span>';
$end_result .= '<li>' . str_ireplace($word, $bold, $result) . '</li>';
}
echo $end_result;
} else {
echo '<li>No results found</li>';
}
}
?>


PHP code is commented so you can easily follow what is going on. If you got some results from the database, you will show them to your user and even bold the word that the user searched for inside results.

This is some simple CSS I used to format the form and the results:


  Code
body{ font-family:Arial, Helvetica, sans-serif; }
*{ margin:0;padding:0; }
#container { margin: 0 auto; width: 600px; }
a { color:#DF3D82; text-decoration:none }
a:hover { color:#DF3D82; text-decoration:underline; }
ul.update { list-style:none;font-size:1.1em; margin-top:10px }
ul.update li{ height:30px; border-bottom:#dedede solid 1px; text-align:left;}
ul.update li:first-child{ border-top:#dedede solid 1px; height:30px; text-align:left; }
#flash { margin-top:20px; text-align:left; }
#searchresults { text-align:left; margin-top:20px; display:none; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#000; }
.word { font-weight:bold; color:#000000; }
#search_box { padding:4px; border:solid 1px #666666; width:300px; height:30px; font-size:18px;-moz-border-radius: 6px;-webkit-border-radius: 6px; }
.search_button { border:#000000 solid 1px; padding: 6px; color:#000; font-weight:bold; font-size:16px;-moz-border-radius: 6px;-webkit-border-radius: 6px; }
.found { font-weight: bold; font-style: italic; color: #ff0000; }
h2 { margin-right: 70px; }



I showed the simplest way to build modern search form and get the results without refreshing the page. I hope you enjoyed this tutorial. You can ask questions in comments.

You can see the demo for this tutorial here.

DEMO

refer: http://www.codeforest.net/simple-search-with-php-jquery-and-mysql

Short URL click! Facebook Share
<< Back : เข้าชม 10,688 ครั้ง : ขึ้นไปด้านบน
รับโพสเว็บ รับจ้างโพสเว็บบอร์ด รับโพสเว็บไซด์ webboard Seeding รับจ้างโพสต์ โปรโมทเว็บไซต์ webUB.com



รับทำเว็บไซต์, ทำเว็บ, สร้างเว็บไซต์, รับทำเว็บ, รับออกแบบเว็บ, รับเขียนเว็บ, ออกแบบเว็บ, เว็บดีไซน์, รับสร้างเว็บ, เขียนเว็บไซต์, เว็บ, บริษัท ทำเว็บ, บริษัท สร้างเว็บ, บริษัท ออกแบบเว็บ, บริษัท เขียนเว็บ, ผลงานเว็บ, โฮสติ้ง,Design,Web,เว็บ,เว็บ โฮสติ้ง,เว็ป,โฮสติ้ง ราคาถูก,เว็บไซต์,จดโดเมน,เว็บโฮสติ้ง,Web Download,Web PHP,Flash MX,Graphic Design,Search Engine, Web, Design, Web Host,Web Hosting,Web Page,เขียนเว็บ,เขียนเว็บไซต์,จัดทำเว็บ,จัดทำเว็บไซต์,ทำเว็บ,ทำเว็บไซต์, โปรโมทเว็บ,ฟรี เว็บ,รับเขียนเว็บ,รับทำเว็บ,รับทำเว็บไซต์,รับออกแบบเว็บ,รับออกแบบเว็บไซ ต์,เว็บ สำเร็จรูป,เว็บดีไซน์,เว็ปไซต์, สร้างเว็บ,สร้างเว็บไซต์,ออกแบบ เว็บไซต์,ออกแบบเว็บ,ออกแบบเว็บไซต์,เขียนโปรแกรม,บริการเว็บโฮสติ้ง,ประชา สัมพันธ์เว็บ,รับจัดทำเว็บไซต์,รับสร้างเว็บ,เว็บโปรแกรม,เว็บสวย, บริการจัดทำเว็บไซต์,บริษัทรับจัดทำเว็บไซต์,ให้บริการจัดทำเว็บไซต์, มีประสบการณ์การจัดทำเว็บไซต์, งานบริการเว็บไซต์,ผลงานการเว็บไซต์,ผลงานเว็บไซต์,เว็บไซต์,เว็บไซต์ ปรัชญา "พอเพียง",เว็บไซต์ราคาที่ยุติธรรม,เว็บไซต์ระบบมาตรฐาน,เว็บไซต์ทุกงาน, เว็บไซต์ธุรกิจ, โปรโมทเว็บ,ประชาสัมพันธ์เว็บ,เว็บ,ออกแบบเว็บ,เขียนโปรแกรม,สร้างเว็บ,ออก แบบเว็บไซต์,ทำเว็บ,เว็บสวย,เขียนเว็บไซต์,ทำเว็บไซต์,รับทำเว็บ,รับออกแบบ เว็บ,เขียนเว็บ,รับเขียนเว็บ,รับทำเว็บไซต์,รับจัดทำเว็บไซต์,เว็บโฮสติ้ง, จัดทำเว็บ,เว็บโปรแกรม,เว็บไซต์,เว็บดีไซน์,รับออกแบบเว็บไซต์,สร้างเว็บไซ ต์,เว็บ,จดโดเมน,บริการเว็บโฮสติ้ง,จัดทำเว็บไซต์,โปรแกรมคอมพิวเตอร์

รับทำเว็บไซต์ : โปรโมทเว็บไซต์ : รับเขียนโปรแกรม : สอนสร้างเว็บ : จด Domain name 299บ. : เช่า Hosting : บริการดูแลเว็บไซต์ : รับซื้อ ขาย Rolex : Sitemap.xml
สปริงเกอร์

ข้อสอบ คลังข้อสอบ ระบบข้อสอบ โปรแกรมข้อสอบ ฟรี Exam.in.th
เว็บไซต์ในเครือข่าย: SiamWebCity.com webUB.com EXAM.in.th ข้อสอบ.ไทย ไอเดียแต่งบ้าน homeEST.com
Copyright © 2009-2019 SiamWebCity.COM. ® All rights reserved. หมายเลขทะเบียนประกอบพานิชย์อิเลคทรอนิกส์ : 0447314800321
E-mail, Google Talk : admin [at] siamwebcity.com, Skype: SiamWebCity.com
ขึ้นไปด้านบน