|
JavaScript - Ajax Auto Suggestion Search From Database
Hi;
I am implementing a Ajax auto suggestion search from database. I find an example from http://www.roscripts.com/Ajax_autosu...abase-154.html . I have not problem with the php part about search from database, but i got a problem from the search from, i added a listerner to input tag, but it still not auto suggest anyword when i type any of word, Could any one help me, Thanks. PHP Code: <html> <head> <title>roScripts - Ajax auto-suggest</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script src="lib/prototype.js" type="text/javascript"></script> <script src="src/scriptaculous.js" type="text/javascript"></script> <script src="src/unittest.js" type="text/javascript"></script> <script src="lib/builder.js" type="text/javascript"></script> <script src="src/controls.js" type="text/javascript"></script> <script src="src/effects.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <form method="post" action="response.php"> <label for="testinput">Search</label><br /> <input type="text" id="search" name="search" autocomplete="off" class="input" value="" onkeyup="autoSuggest();" /><br /> <div id="update" style="display:none;position:relative;"></div> <input type="image" name="register" class="submit-btn" src="http://www.roscripts.com/images/btn.gif" alt="submit" title="submit" /> </form> <script type="text/javascript" language="javascript" charset="utf-8"> function autoSuggest(){ new Ajax.Autocompleter('search','update','response.php', { tokens: ','} ); Autocompleter.show(); } </script> </div> </body> </html> Similar TutorialsI am very new to web development and I need a push in the right direction here. This is my problem; I am making a web page that will be used privately by two people. I need to find a way to go to an FTP site that can only be accessed by web browser (that is what IT told me) and download a file that has a constant name "prevhour.log" and save this file to a directory so that it can be read (not sure how, my boss is doing that end) and the data will be dumped, and this data will be extrapolated into a gas gauge style dashboard. I need some way of this to be done as automated as possible. Thank you for your time. Rick Hi, I have this code to get hints (PHP file): Code: <?php
include("include/session.php");
$GetNames = "SELECT firstname, lastname, username FROM users";
$GetNamesConnect = $database->query($GetNames);
While($row = mysql_fetch_array($GetNamesConnect))
{
$a[$row['username']] = $row['firstname'] . " " . $row['lastname'];
}
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint.", ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$id = $row['username'];
$response= "<a href='profile.php?user=$row['username']'>$hint</a>";
}
//output the response
echo $response;
?>
This is the display part (Javascript/Ajax) Code: <!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>Untitled Document</title>
</head>
<body>
<script type="text/javascript">
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</body>
</html>
What I want to do it to limit the names suggested to 10, how would I do this? I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name. Is there a way I can disable the screen refresh in my ajax code while they are composing their message? he everyone please i want to know how to submit a form using ajax every 5 minutes without reloading page i have a huge form for exams and i need to submit the form without the need to wait until pressing submit because the user may wait to think about the answer a very long time.. so i want to submit the form and at the same time i cant reload the page as it is in normal submit form.. so how i can submit form in the background without letting the user knows that the form is submitted??? I am currently trying to put together a AJAX search that searches a MySQL database using PHP. I have created the below scripts. I cannot get it to function properly. Essentially I want someone to type in a partial search term and click submit and see the results. The purpose of this is for it to become part of a mobile app. Any help would be appreciated. Thank you! HTML: <!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> <style type="text/css"> body{font-family:'Lucida Grande', Verdana, sans-serif;; font-size:14px; color:#666666;} h2{color:#000000; margin-bottom:20px;} h3{color:#000000; font-size:14px;} input{font-size:16px; color:#444444;} a:link, a:visited, a:hover{color:#0033CC;} a:hover{text-decoration:none;} div.searchInput{padding:8px; background:#DEDEDE; clear:both;} div.footer{padding:6px; border-top:solid 1px #DEDEDE; font-size:10px;} #msg{background:#FFFFCC; margin-bottom:10px; padding:4px; display:none;} </style> <script type="text/javascript"> function showProducts(str) { if (str=="") * { * document.getElementById("search-result").innerHTML=""; * return; * } if (window.XMLHttpRequest) * {// code for IE7+, Firefox, Chrome, Opera, Safari * xmlhttp=new XMLHttpRequest(); * } else * {// code for IE6, IE5 * xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); * } xmlhttp.onreadystatechange=function() * { * if (xmlhttp.readyState==4 && xmlhttp.status==200) *** { *** document.getElementById("search-result").innerHTML=xmlhttp.responseText; *** } * } xmlhttp.open("GET","search.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form id="searchForm" name="searchForm" method="post" action="javascript:searchNameq();"> <div class="searchInput"> <input name="searchq" type="text" id="searchq" size="30" onkeyup="javascript:showProducts()"/> <input type="button" name="submitSearch" id="submitSearch" value="Search" onclick="javascript:showProducts()"/> </div> </form> <h3>Search Results</h3> <div id="msg">Type something into the input field</div> <div id="search-result"></div> </body> </html> PHP: <?php $q=$_GET["q"]; //connect to the database mysql_connect("christianbrogers.db.5646816.hostedresource.com","christianbrogers","GHbn123"); mysql_select_db("christianbrogers"); //explode our search term into separate words $search_exploded = explode(" ",$search); foreach($search_exploded as $search_each) { //construct the query $x++; if ($x==1) $construct .= "name LIKE '%$search_each%'"; else $construct .= " OR name LIKE '%$search_each%'"; } //echo out the constructed query $construct = "SELECT * FROM products WHERE $construct"; $run = mysql_query($construct); $foundnum = mysql_num_rows($run); if ($foundnum==0) echo "No results found."; else { while ($runrows = mysql_fetch_assoc($run)) { //get data $name = $runrows['name']; echo $name; ?> Now I cannot get this code working. At the moment it needs to just update the table with the message and the user id ($uid) but it will not, the status does not return as "200", which the IF statment checks. AJAX: Code: function sendMessage() {
if (sendReq.readyState == 4 || sendReq.readyState == 0) {
var url = "scripts/get_data.php?uid=<?=$uid?>";
sendReq.open("POST", url, true);
sendReq.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sendReq.onreadystatechange = sendReset;
var param = 'message=' + document.getElementById('txt_message').value;
param += '&chat=1';
sendReq.send(param);
if (sendReq == 4 || sendReq == 200) {
document.getElementById('txt_message').value = '';
}
}
}
PHP Code: //Send message if (isset($_POST['message']) && $_POST['message'] != '') { //Variables $chat = mysql_real_escape_string($_GET['chat']); $message = mysql_real_escape_string($_GET['message']); $query = "INSERT INTO message (chat_id, post_uid, recipient_uid, message, post_time) VALUES (1, ".$sid.", 4, ".$message.", date)"; mysql_query($query); } And here is the form if you want to see it: Code: <form id="frmmain" name="frmmain" onsubmit="">
<input type="button" name="btn_get_message" value="Refresh Chat" onclick="getMessage()" />
<input type="button" name="btn_reset_chat" id="btn_reset_chat" value="Reset Chat" onclick="resetChat()" />
<br />
<input type="text" id="txt_message" name="txt_message" style="width: 447px; color:#000000;" />
<input type="button" name="btn_send_message" id="btn_send_message" value="Send" onclick="sendMessage()" />
</form>
I am using an example of this kind of feature to reference to, and I don't understand how the param is being sent to the server, is it being added to the URL? URL before param: scripts/get_data.php?uid=3 after param has been sent (changes in dark orange): scripts/get_data.php?uid=3 message=message goes here&chat=1 If so then I am guessing that the var param should look like this(change in red): Code: var param = ' & message=' + document.getElementById('txt_message').value;
param += '&chat=1';
sendReq.send(param);
Hi everyone, I was assigned to find out how to do this for my work. We were hoping for a javascript (but it could be PHP or other comparable format). Instead of the search function searching the website, we would like it to search a small database full of information. I have been reading for days now and have just gotten more confused. One thing I read (hopefully it was true) is that you can save a database as an HTML, then convert HTML to .JS which javascript will run. Any help would be greatly appreciated! Jeremy from Farmco hi, im fairly new to javascript but i know the basics. im just wondering is there a possibility to make a search that will connect to my databse with a product list in it, and then display any matches to what the user searched for? help is always helpful Hi all!, I'm having a few challenges trying to create a link to a "new" search from a database search results page. This maybe a better example: My goal is: To allow website visitors to searches site for i.e. "Dog Collars", the results page lists every "dog collar" and store that carries "dog collars" (in database). At that point I would like to have links (on the results page) to all brands of "dog collars" and stores that carry "dog collars". I would like to then be able to click on a "brand" (text link) of "dog collars" and then generate a new results page that lists all store and vendor information. thank you in advance! Erick p.s. this is a link to a site that has a similar featu http://69.0.211.58/~pubexpress/ami/html/index.html I am starting a new project soon. Now, the project is still in the stage of planning. But I am quite confuse now which programming language to implement. I am going to design a system where the normal users will update the data with the system while the data required changes will need system administrator to apporve it. I will need a database to keep those records (the data required update) so that the system admin can refer to the database and make changes. Do I have another choice instead of using Microsoft Access 2007 macros or VBA ? I prefer a web-based programming. Any suggestion, please ? Hello, I am creating a little script that allows me to scroll my content sections in and out though Ajax and CSS. I have have successfully made it slide in from the top but I have one problem, sliding out! I wrote a clip for 'aniOut' that works also but I cant seem to make one load before the other in transition. I am not very good with javas cript anyone have any suggestions? So far this only is working for Chrome. My site is live with the working slide in at The Mind Company. Also I am having a load issue with some browsers and computers where the page must be refreshed in order to view proper, any suggestions? CSS: Code: header {
z-index:100;
position:relative;
display: block;
background-color: #272727;
height:100px;}
#contentBody {
min-height:48em;}
footer {
position:relative;
display: block;
background-color: #272727;
height:168px; }
#aboutPage {
display:none;}
#productPage {
display:none;}
#contactPage {
display:none;}
.aniIn {
z-index:0;
-webkit-animation-name: ANIMATEin;
-webkit-animation-duration: 0.25s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEin {
from {
margin-top:-4000px;
}
to {
margin-top:0px;
}
}
.aniOut {
-webkit-animation-name: ANIMATEout;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}
@-webkit-keyframes ANIMATEout {
from {
margin-top:0px;
}
to {
margin-top:3000px;
}
}
Script: Code: function $_(IDS) { return document.getElementById(IDS); }
function ani(){
document.getElementById(classID).className ='aniOut';
}
function checkPage(classID, url){
var tmp = '';
var sel = document.getElementsByTagName('section');
for (var i=0; i<sel.length; i++){
if (sel[i].id == classID) { tmp = 'block' } else { tmp = 'none' }
$_(classID).className ='aniIn';
sel[i].style.display = tmp;}
$_(classID).style.display = 'block';
loadContent(classID, url); }
function loadContent (classID, url){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(classID).innerHTML=xmlhttp.responseText;}}
xmlhttp.open("GET","content/"+url,true);
xmlhttp.send();}
HTML: Code: <!-- Header Areas: (Constent visual)-->
<header>
<li><a href="#" onclick="checkPage('aboutPage', 'about.html');return false">About</a></li>
<li><a href="#" onclick="checkPage('productPage', 'projects.html');return false">Projects</a></li>
<li><a href="#" onclick="checkPage('contactPage', 'contact.html');return false">Contact</a></li>
</header>
<!-- Content Areas: (Variable visual)-->
<div id="contentBody">
<section id="aboutPage"></section>
<section id="productPage"></section>
<section id="contactPage"></section>
</div>
<!-- Footer Area: (Constant visual)-->
<footer></footer>
I've been using Coffeecup free version for HTML/CSS needs and it works fine as if you forget say one or two values, the prompt feature works fine. Im now getting into Javascript and can see that it is a very useful language, however are there any editors that will provide prompt/suggestion pop ups when editing which are free? If possible, one that combines HTML/CSS/Javascript all together. I've seen this:- http://download.cnet.com/Free-JavaSc...-10907077.html And was going to give it a download. But anyone know of any others or can recommend the above? Thanks Hello, I have a specific need in javascript. Can I be guided in this context if its possible or not??? I am using virtuemart extension in joomla to make an ecommerce website. I will try to explain my requirement with the example. Following is the sample category tree with number. 1.0 .....1.1 ..........1.1.1 ..........1.1.2 .....1.2 ..........1.2.1 ..........1.2.2 .....1.3 ..........1.3.1 ..........1.3.2 2.0 .....2.1 ..........2.1.1 ..........2.1.2 .....2.2 ..........2.2.1 ..........2.2.2 .....2.3 ..........2.3.1 ..........2.3.2 Now I have a drop down main menu as 1.0 and 2.0. I want that when i click on 1.0 all the nodes of 1.0 should be opened and 2.0 should be closed and similarly when i click on 2.0 all its child nodes should be opened and 1.0 should be closed. What happen with most extensions is that at a time only one child is opened. If i click on 1.0 then only 1.1 or 1.2 or 1.3 will remain open at a time. Does this kind of customization can be done or is available in javascript .... I hope i will be helped... Thanks a lot for the time. Hello, I don't know if this can be done in Javascript, or requires any other language but i was wondering if this would be possible. I would like to embed this Javascript code in to a PHP file and then for it to run automatically upon the PHP file loading: Code: <td class="smallDesc"> <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </td> The Javascirpt is the Facebook Share button that basically allows users that have Facebook to share the page there currently on in their Facebook status by pressing the button, but if there not logged in it shows the login page, not a problem just continue the script. The current button i which is what i want to load automatically in the PHP file is located here, to test the functionalilty just click "Share" button in blue.. http://watch-movies-online.anyfilman...-Movie-17.html To summarise, i would like the above Javascript code to execute automatically upon pageload of this PHP file.. http://www.watch-movies-online.anyfi...p://google.com. If that could be done, and if this also is possible.. i would like for the "Share" button on the external page that is loaded from the Javascript code above to be clicked automatically so in effect when ever someone visits the PHP page after clicking "Click Here to Watch/Stream 2012 Online For Free" on this page it will automatically load the Facebook Share box, and automatically click the "Share" Button and then close the page if possible, but not required. Please feel free to ask any questions, i'll be happy to answer. Thanks in advance. Best Regards, Jonathan. Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. In this case, Let's take Google Search as example: The code is JScript .NET, which is basically a .NET version of Javascript. Regardless of language, Anyone with appending type of skill can answer my question. This code is used in Fiddler(It's a Man-in-the-middle proxy) Code: if (oSession.uriContains("&q=")) // oSession is a Fiddler object session // uriContains() function, checks for case-insensitive string from the URI
{
var str = oSession.fullUrl;
var sAppend = "test1+test2+test3";
if (!oSession.uriContains(sAppend))
{
oSession.fullUrl = str.replace( "&q=","&q="+sAppend);
}
}
For those who are confused, It says, If &q= is present in the URI, replace/append &q= with &q=test1+test2+test3 Problem: It appends test1+test2+test3 instantly, when it sees &q= in the URL. Basically, how do I make it wait until I click the submit/search button Thank you. Update: I heard about Onsubmit() event, but not really familiar with it. How do I use it? like, should I go to google source page and edit the form id? Also, Any other methods besides Onsubmit()? Hi experts, is it possible via Javascript to search certain websites with certain keywords without having to use specific search engines? example search only the following: 1. www.yyy.com 2. www.aaa.com 3. www.zzz.com for the keyword "Laminat" and open the sites accordingly. thx Hi Everyone! I have a website that I'm designing where I have the need to search multiple sites at specific times. By this I mean that In some cases, we would want to search only the internet using google, or only search the site that I've created (which currently uses the jse_search.js solution), or only our company's website. I currently have four different search boxes that will search either the internet, the internal site, a separate internal site, or a third-party website, which all working fine. The problem is that the search boxes take up quite a bit of space, and the layout is becoming cumbersome. Is there a way in Javascript I could use a single search box and a drop-down list to select which method to use? The code I'm currently using is below. With the exception of the Google search function, I've modified some of the site names to general site names and paths to preserve the company's anonymity: Code in the <head> tag: Code: <script language="JavaScript1.3" type="text/javascript" src="jse_form.js"> </script> Code in the <body> tag: Code: <!--Begin Internal Site Search 1!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td><form name="jse_Form" onsubmit="search_form(jse_Form);return false">
<input type="text" name="d" size="30">
</tr></td>
<tr><td>
<input type="button" value="Internal Site Search 1" onclick="search_form(jse_Form)">
</form>
</tr></td>
</table>
<!--End Internal Site Search 1!-->
<!--Begin Internal Site Search 2!-->
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<!--webbot bot="Search" S-Index="all" S-Fields S-Text="Search for:" I-Size="20" S-Submit="Start Search" S-Clear="Reset" S-TimestampFormat="%m/%d/%Y" TAG="BODY" b-useindexserver="1" startspan -->
<form action="http://sitesearch2.idq" method="POST"><input type="text" name="UserRestriction" size="30" value>
</tr></td>
<tr><td style="text-align: center;">
<input type="submit" value="Internal Site Search 2"></form>
</form>
<!--webbot bot="Search" i-checksum="4210" endspan -->
</td></tr>
</table>
</div>
<!--End Internal Site Search!-->
<!--Begin Google Search!-->
<form method="get" action="http://www.google.com/search">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="30" maxlength="233" value="" />
</tr></td>
<tr><td align="center">
<input type="submit" value="Google Search" /></td></tr>
</table>
</div>
</form>
<!--End Google Search!-->
<!--Begin Third Party Search!-->
<form id="keywordSearchForm" method="get" action="http://www.site3.html">
<div>
<p style="text-align: center;">
<table border="0" cellpadding="0">
<tr><td>
<input class="input" type="text" name="keyword" size="30" />
</tr></td>
<tr><td align="center">
<input type="hidden" name="origin" value="keywordsearch" /><input id="go" class="button" tabindex="0" type="submit" value="Third Party Search" />
</td></tr>
</table>
</div>
</form>
<!--End Third Party Site Search!-->
Hello people. I'm looking to create a simple search engine capable of searching multiple search engines simultaneously together (e.g. Google, Bing, Yahoo, etc.) and then displaying the results below for all sites on the same page. I don't want each search engine results page opening up in individual windows or anything, nor do I want people to have to manually select the search engine to search with. Just a single page where a user types in something, pressed [Enter] and then presented with all results from multiple sites on one page (without duplicates). I'm also looking to do this with image and torrent sites, etc. How would I go about doing this? Thanks a million guys. You have bigger brains than me. Hello everyone. I was working on a ajax function and I can't seem to figure out what I'm doing wrong here. I'm kinda new with the prototype method I was wondering if I could get some help figuring out what I'm doing wrong here exactly and how I can fix this. Any help on this would be wonderful. Thanks, Jon W Code: function createAjax() {
if(!this.http && window.ActiveXObject) {
try {
this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
catch(e1) {
this.http = false;
}
}
if(!this.http && window.XMLHttpRequest) {
try {
this.http = new XMLHttpRequest();
}
catch(e2) {
alert("Sorry we was unable to make a request between your browser.");
}
}
}
createAjax.prototype.request = function(url) {
var rmd = Math.random();
this.http.open('get', url+"&rmd="+rmd, true);
this.http.send(null);
this.http.onreadystatechange = this.responseHandler;
}
createAjax.prototype.responseHandler = function(obj) {
if(this.http.readyState == 4) {
document.getElementById(obj).innerHTML = this.responseText;
}
}
function ajax(url, obj) {
a = new createAjax();
a.request(url);
a.responseHandler(obj);
}
var doAjax = new ajax('ajax.php?name=jon','content');
|
|||||||