Contains javascript, PHP and HTML code. $(“.submit_button”).click(function(){}- submit_button is the class name of anchor tag. Using element.attr(“id”) calling search input value.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;

if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "searchdata.php",
data: dataString,
cache: false,
beforeSend: function(html)
{
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader.gif" /> Loading Results...');
},

success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}

});

}
return false;
});
});
</script>

<form method="get" action="">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" />
</form>

<div id="searchword">
Search results for <span class="searchword"></span></div>
<div id="flash"></div>
<ol id="insert_search" class="update">

</ol>  

Searchdata.php
Contains simple PHP Code. Using LIKE to find the database results.

< ?php
include('config.php');
if(isset($_GET['search_word']))
{
$search_word=$_GET['search_word'];
$sql=mysql_query("SELECT * FROM messages WHERE msg LIKE '%$search_word%' ORDER BY mes_id DESC LIMIT 20");
$count=mysql_num_rows($sql);
if($count > 0)
{
while($row=mysql_fetch_array($sql))
{

$msg=$row['msg'];
$bold_word='<b>'.$search_word.'</b>';
$final_msg = str_ireplace($search_word, $bold_word, $msg);
?>

<li>< ?php echo $final_msg; ?></li>

< ?php
}
}
else
{
echo "<li>No Results";
}
}
?>   

CSS:

  *{margin:0;padding:0;}
ol.update
{
list-style:none;
font-size:1.1em;
margin-top:20px
}
ol.update li
{
height:70px;
border-bottom:#dedede dashed 1px;
text-align:left;
}
ol.update li:first-child
{
border-top:#dedede dashed 1px;
height:70px;
text-align:left
} 

Demo: http://9lessons.net63.net/newsearch.php
Download: http://www.box.net/shared/m2qnh6l8no
Source: http://9lessons.blogspot.com/2009/08/twitter-like-search-with-jquery-ajax.html

Related Listings:

1. Twitter API to create a stream of messages with PHP and jQuery This tutorial illustrates a very simple way to work with...
2. Simple Twitter App with jQuery Templates and JSONP Twitter hosts this cool jsonp interface that enables you to...
3. Incremental Search for Select Boxes – jQuery Plugin Did you ever have to scroll through a select box...

Usage:
Here’s the most basic example, it enables in line editing for the page element that has an id of content.

$( "#content" ).eip( "save.php" );

After editing is complete and the user clicks on the save button the script sends the url, form_type, element id, original value and new value data via HTTP post to save.php. The returned data is expected to be in JSON object, with the following values: is_error, error_text and html. The is_error field is a boolean, and error_text is used to provide information about the error condition. The html is a string that is used to replace the contents of the edited element.

If you’ve got a larger chunk of text to edit you’ll want to use a textarea form:

$( "#content" ).eip( "save.php", {
    form_type: "textarea"
} );

And for those cases where you just need to provide options, there’s an easy way to do a select form:

$( "#content" ).eip( "save.php", {
    form_type: "select",
    select_options: {
        blue    : "Blue",
        green   : "Green",
        red     : "Red",
        black   : "Black",
        brown   : "Brown",
        white   : "White"
    }
} );

For select forms two additional bits of data are passed to the save URL: the original option text and the new option text.

The eip function will also work on multiple elments, so if you select a class it will make all of the elements with that class editable:

$( ".edit-class" ).eip( "save.php" );

The Save XHR and Response

When the edit form is saved JEIP uses the jQuery AJAX function to send data to the save URL. It send the following fields via HTTP POST:

* url – (string) URL that the edit form was on.
* form_type – (string) The type of edit form that was used (text, textarea, select)
* id – (string) The id of the DOM element that was edited.
* orig_value – (string) The original value of the DOM element that was edited.
* new_value – (string) The new value of the DOM element that was edited.
* data – (object) Optional additional data that was passed along via the original eip call.

For select form edits two additional fields are sent:

* orig_option_text – (string) The original option display text.
* new_option_text – (string) The new option display text.

The response to the XHR needs to be a JSON object with three values:

* is_error – (bool) When true indicates that there was some sort of error when the save URL processed the XHR. Under normal conditions this should be set to false.
* error_text – (string) When is_error is true, this string is used to provide a plain text descriptive of what the error was.
* html – (string) This string is used to replace the old value of the edited DOM element.

Options

There are a number of options that can be provided as part of the second parameter in the eip function. The defaults should fit for most, but if you want to tweak things I’ve tried to provide lots knobs.

* save_on_enter – (bool) When true the save event is triggered when the enter key is pressed. Doesn’t apply for textarea edits.
* cancel_on_esc – (bool) When true the cancel event is triggered when the escape key is pressed.
* focus_edit – (bool) When true give the edit field focus when the edit form is shown.
* select_text – (bool) When true select the text in the edit field.
* edit_event – (string – event) What type of event (usually click or dblclick) to trigger the edit mode.
* select_options – (object) Key/value pairs for the option fields in a select form. The key will be used as the option value and the value from the option will be used as the display option text.
* data – (object) Additional data that will be passed in the XHR to the save URL.
* form_type – (string) What type of edit form to use: text, textarea and select. The default is text.
* size – (int) Value to use for the size attribute on the edit field. By default this is calculated at run time.
* max_size – (int) Maximum value to allow when calculating the size value.
* rows – (int) Value to use for the rows attribute in textarea edit forms. By default this is calculated at run time.
* max_rows – (int) Maximum value to allow when calculating the rows value.
* cols – (int) Value to use for the cols attribute in the textarea edit forms.
* savebutton_text – (string) Text to use on the save button.
* savebutton_class – (string – CSS class) CSS class to use on the save button. The default value is jeip-savebutton.
* cancelbutton_text – (string) Text to use the on the cancel button.
* cancelbutton_class – (string – CSS class) CSS class to use on the cancel button. The default value is jeip-cancelbutton.
* mouseover_class – (string – CSS class) CSS class to apply when the mouse enters an element that is editable. The default value is jeip-mouseover.
* editor_class – (string – CSS class) CSS class to apply to the edit form wrapper. The default value is jeip-editor.
* editfield_class – (string – CSS class) CSS class used on the edit field element. The default value is jeip-editfield.
* saving_text – (string) Text shown while the XHR is waiting for a response. The default value is ‘Saving …’.
* saving_class – (string – CSS class) CSS class used on the saving_text string. The default value is jeip-saving.
* saving – (string – template) Template string used to show the saving_text string.
* start_form – (string – template) Template string used to start the edit form.
* form_buttons – (string – template) Template string used to show the form buttons.
* stop_form – (string – template) Template string used to end the edit form.
* text_form – (string – template) Template string used to show the text edit forms.
* textarea_form – (string – template) Template string used to show the textarea edit forms.
* start_select_form – (string – template) Template string used to start a select edit form.
* select_option_form – (string – template) Template string used to show options elements in select edit forms.
* stop_select_form – (string – template) Template string used to edit a select edit form.
* after_save – (function) Function that is called after the XHR completes. By default it just flashes the element a few times.
* on_error – (function) Function that is called when the save URL returns an error (by setting is_error to true in the return JSON object). By default it calls the alert() function to show the error_text returned from the XHR.

Demo: http://josephscott.org/projects/code/javascript/jeip/example/
Download: http://jeip.googlecode.com/svn/tags/0.1.2/jeip.js
Source: http://josephscott.org/code/javascript/jquery-edit-in-place/

Related Listings:

1. Ajax Instant Inline Text Edit Ajax Instant Edit Text User can edit the inline text...
2. NicEdit Inline Content Editor NicEdit is a WYSIWYG editor for websites. Its goal is...

And so we begin:
JavaScript

<script src="jquery-1.2.1.pack.js" type="text/javascript"></script><script type="text/javascript">

function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $(‘#suggestions’).hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $(‘#suggestions’).show();
                $(‘#autoSuggestionsList’).html(data);
            }
        });
    }
} // lookup

function fill(thisValue) {
    $(‘#inputString’).val(thisValue);
   $(‘#suggestions’).hide();
}

</script>

JS Explaniation

Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing.

The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call.

IF the inputString is ‘0′ (Zero), it hides the suggestion box, naturally you would not want this showing if there is nothing in the text box. to search for.

ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows…

$.post(url, [data], [callback])

The ‘callback’ part allows to hook in a function, this is where the real magic if thats what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show), show the suggestionBox and replace the HTML inside with the returned data.

SIMPLE!

Now for the PHP Backend (RPC.php)

As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.

// PHP5 Implementation - uses MySQLi.
$db = new mysqli(‘localhost’, ‘root’ ,”, ‘autoComplete’);
if(!$db) {
    // Show error if we cannot connect.
    echo ‘ERROR: Could not connect to the database.’;
} else {
    // Is there a posted query string?
    if(isset($_POST[‘queryString’])) {
        $queryString = $_POST[‘queryString’];
        // Is the string length greater than 0?
        if(strlen($queryString) >0) {
        // Run the query: We use LIKE ‘$queryString%’
        // The percentage sign is a wild-card, in my example of countries it works like this…
        // $queryString = ‘Uni’;
        // Returned data = ‘United States, United Kindom’;

        $query = $db->query("SELECT value FROM countries WHERE value LIKE ‘$queryString%’ LIMIT 10");
        if($query) {
            // While there are results loop through them - fetching an Object (i like PHP5 btw!).
            while ($result = $query ->fetch_object()) {
                // Format the results, im using <li> for the list, you can change it.
                // The onClick function fills the textbox with the result.
                echo ‘</li><li onclick="fill(’‘.$result->value.’‘);">’.$result->value.‘</li>’;
            }
        } else {
            echo ‘ERROR: There was a problem with the query.’;
        }
    } else {
        // Dont do anything.
    } // There is a queryString.
} else {
    echo ‘There should be no direct access to this script!’;
}
}

?>

PHP Explaination

Im not going to go into much detail here because there are loads of comments in the code above.

Basically, it takes the ‘QueryString’ and does a query with a wildcard at the en.

This means that in this case of the code each key-press generates a new query, this is MySQL intensive if its always being done, but short of making it exceedingly complex it is fine for small scale applications.

The PHP code is the part you have to change to work in your system, and all the it is updating the ‘$query’ to your database, you should be able to see where you put the table column name in etc…

CSS Styling – im using CSS3, YEA BABY! much easier although limits the functionality to Firefox and Safari.

<style type="text/css">

.suggestionsBox {
    position: relative;
    left: 30px;
    margin: 10px 0px 0px 0px;
    width: 200px;
    background-color: #212427;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border: 2px solid #000;
    color: #fff;
}

.suggestionList {
    margin: 0px;
    padding: 0px;
}

.suggestionList li {
    margin: 0px 0px 3px 0px;
    padding: 3px;
    cursor: pointer;
}

.suggestionList li:hover {
    background-color: #659CD8;
}
</style>

The CSS is pretty standard, nothing out of the ordinary.

Main HTML

<div>

       <div>

      Type your county (for the demo):
<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />

    </div>      <div class="suggestionsBox" id="suggestions" style="display: none;">

      <img src="upArrow.png" style="position: relative; top: -12px; left: 30px" alt="upArrow" />

      <div class="suggestionList" id="autoSuggestionsList">

</div>

    </div>

</div>

That is the main bit of HTML, really all you need to run this is an input text box with the ‘onkeyup’ function set to lookup(this.value); Also, i recommend NOT changing the ID of the input box, unless you change it in the Javascript section

Screenshots

I suppose you want to see some more screen shots…. OK.

And another one!

And now for the links… this is probably what you are all looking for!

Demo: Auto Complete Demo

Source ZIP: AutoComplete Source ZIP

this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!

And so we begin:
JavaScript

JS Explaniation

Ok, the above code it the guts to the script, this allows us to hook into the rpc.php file which carries out all the processing.

The Lookup function takes the word from the input box and POSTS it to the rpc.php page using the jQuery Ajax POST call.

IF the inputString is ‘0′ (Zero), it hides the suggestion box, naturally you would not want this showing if there is nothing in the text box. to search for.

ELSE we take the ‘inputString’ and post it to the rpc.php page, the jQuery $.post() function is used as follows…

The ‘callback’ part allows to hook in a function, this is where the real magic if thats what you can call it happens.

IF the ‘data’ returned length is more than zero (ie: there is actually something to show), show the suggestionBox and replace the HTML inside with the returned data.

SIMPLE!

Now for the PHP Backend (RPC.php)

As always my PHP Backend page is called rpc.php (Remote Procedure Call) not that it actually does that, but hey-ho.

PHP Explaination

Im not going to go into much detail here because there are loads of comments in the code above.

Basically, it takes the ‘QueryString’ and does a query with a wildcard at the en.

This means that in this case of the code each key-press generates a new query, this is MySQL intensive if its always being done, but short of making it exceedingly complex it is fine for small scale applications.

The PHP code is the part you have to change to work in your system, and all the it is updating the ‘$query’ to your database, you should be able to see where you put the table column name in etc…

CSS Styling – im using CSS3, YEA BABY! much easier although limits the functionality to Firefox and Safari.

The CSS is pretty standard, nothing out of the ordinary.

Main HTML

That is the main bit of HTML, really all you need to run this is an input text box with the ‘onkeyup’ function set to lookup(this.value); Also, i recommend NOT changing the ID of the input box, unless you change it in the Javascript section

Screenshots

I suppose you want to see some more screen shots…. OK.

And another one!

Demo: Auto Complete Demo

Download: AutoComplete Source ZIP

Source: http://nodstrum.com/2007/09/19/autocompleter/

Related Listings:

1. jQuery Autocomplete Mod This is a modification of Dylan Verheul’s jQuery Autcomplete plug-in....
2. Autocomplete TextboxList Script Extend TextboxList to add closing functionality via a link added...
3. Autocomplete Widget The tool is designed to bring good feelings for both...

jFeed currently parses RSS 0.91, 0.92, 1.0, 2.0 and Atom 1.0 feeds.

Usage:

jQuery.getFeed(options);

options:

* url: the feed URL (required).
* data: data to be sent to the server. See jQuery.ajax data property.
* success: a function to be called if the request succeeds.
The function gets passed one argument: the JFeed object.

Example:

   jQuery.getFeed({
       url: 'rss.xml',
       success: function(feed) {
           alert(feed.title);
       }
   });

JFeed properties:

* feed.type
* feed.version
* feed.title
* feed.link
* feed.description
* feed.language
* feed.updated
* feed.items: an array of JFeedItem

JFeedItem properties:

* item.title
* item.link
* item.description
* item.updated
* item.id

Download: http://www.hovinne.com/dev/jquery/jfeed/jquery.jfeed.tar.gz

Source: http://www.hovinne.com/blog/index.php/2007/07/15/132-jfeed-jquery-rss-atom-feed-parser-plugin

Related Listings:

1. Pulling Your Flickr Feed with jQuery Feeds are the easiest way to view updated content, whether...
2. JQuery Google Feed Plugin Google announced the Google AJAX Feed API. This is...
3. Animated Ajax Delete : jQuery I’m a huge fan of WordPress’ method of individual article...