jquery live search from mysql database?_问答_开发者

开发者 https://www.devze.com 2022-12-11 17:18 出处：网络

in SO you can search for tags without pressing enter. i want to know: are the tags retrieved from the database or from a XML file?

in SO you can search for tags without pressing enter.

i want to know:

are the tags retrieved from the database or from a XML file?
is ajax involved?

i am new at front end. if ajax is involved. how should i write the code?

开发者_开发知识库

i want it to access a php file which returns the data. but im not familiar with how it works practically.

should the code look something like this:

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
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)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

how do i send the text the user typed after he released the key to php? and how should i return the values after php has fetched the tags with SELECT. echo?

plz guide me a little. im so confused when front end is involved.

You can actually find that out yourself by using Firebug. You'll notice that typing a letter in the tag textbox will trigger a request to the server.

For example, the entry "C" will give you the following response from the server:

c#|48259
javascript|18318
c++|16999
asp.net-mvc|7224
c|6948
css|6563

The results are then interpreted within SO and then displayed with jQuery.

Using Firebug as you write an answer, you'll also notice that the client sends requests every minute or so:

POST answer-activity-heartbeat

This is also why you get notice that the question you are currently working on has been updated with new answers.

In general, using FireBug will really help you out understand how websites work. I recommend you start using it if you want to see a bit better how SO was conceived.

Regards

Looking at the firebug console, you can see that its sending and receiving data with ajax. Most likely to a script that fetches the data from a database.

You can do this with jQuery pretty easily.

<script type="text/javascript">
  $("#username").autocomplete("search.php");
</script>
<form name="myForm">
  Name: <input type="text" name="username" id="username" />
  Time: <input type="text" name="time" />
</form>

<?php
//search.php
$q = $_GET['q']
$result = $db->query("SELECT username, id FROM users WHERE username LIKE '%$q%'");
while($user = $result->fetch_assoc()){
  echo $user['username']."|".$user['id']."\n";
}

You can download the plugin here: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

and jQuery: http://jquery.com

I recommend that if your really need to know how it works take a look to JS documentation, but if what you need is doing if fast, use jquery and read the documentation (or buy a book like jQuery Reference Guide). It really simplifies the way to do AJAX and you could send back from the server anything you want, from JSON to HTML.

BTW, the way to know when a input box value has change to trigger the JS which does the AJAX request is using the onchange event of the input.