AJAX Search

Ads
 

AJAX Search

I have to create a project where the user enters a letter in a text box and all the names starting with that letter are retrieved. I'm using PHP and MYSQL as the database. Can somebody please suggest me the AJAX coding of this.

View Answers

October 4, 2012 at 5:11 PM

Here is a php code that shows autosuggest box.

1)index.php:

<html>
<head>
<script type="text/javascript" src="./plugin/jquery.js"></script>
<script>
function suggest(inputString){
        if(inputString.length == 0) {
            $('#suggestions').fadeOut();
        } else {
        $('#country').addClass('load');
            $.post("autosuggest.php", {queryString: ""+inputString+""}, function(data){
                if(data.length >0) {
                    $('#suggestions').fadeIn();
                    $('#suggestionsList').html(data);
                    $('#country').removeClass('load');
                }
            });
        }
    }

    function fill(thisValue) {
        $('#country').val(thisValue);
        setTimeout("$('#suggestions').fadeOut();", 600);
    }

</script>

<style>
#result {
    height:20px;
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    padding:5px;
    margin-bottom:10px;
    background-color:#FFFF99;
}
#country{
    padding:3px;
    border:1px #CCC solid;
    font-size:17px;
}
.suggestionsBox {
    position: absolute;
    left: 0px;
    top:40px;
    margin: 26px 0px 0px 0px;
    width: 200px;
    padding:0px;
    background-color: #000;
    border-top: 3px solid #000;
    color: #fff;
}
.suggestionList {
    margin: 0px;
    padding: 0px;
}
.suggestionList ul li {
    list-style:none;
    margin: 0px;
    padding: 6px;
    border-bottom:1px dotted #666;
    cursor: pointer;
}
.suggestionList ul li:hover {
    background-color: #FC3;
    color:#000;
}
ul {
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#FFF;
    padding:0;
    margin:0;
}

.load{
background-position:right;
background-repeat:no-repeat;
}

#suggest {
    position:relative;
}

</style>
</head>

<body>




 <form id="form" action="#">
    <div id="suggest">Start to type a country: <br />
      <input type="text" size="25" value="" id="country" onkeyup="suggest(this.value);" onblur="fill();" class="" />

      <div class="suggestionsBox" id="suggestions" style="display: none;"> 
        <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
      </div>
   </div>
</form>



</body>
</html>

Please visit the following link:

http://www.roseindia.net/tutorial/ajax/jquery/autocomplete.html


October 4, 2012 at 5:12 PM

continue..

<?php
   $db_host = 'Your database host name';
   $db_username = 'Your datbase username';
   $db_password = 'Your database password';
   $db_name = 'Your database name';

   $db = new mysqli($db_host, $db_username ,$db_password, $db_name);

    if(!$db) {

        echo 'Could not connect to the database.';
    } else {

        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);

            if(strlen($queryString) >0) {

                $query = $db->query("SELECT country FROM countries WHERE country LIKE '$queryString%' LIMIT 10");
                if($query) {
                echo '<ul>';
                    while ($result = $query ->fetch_object()) {
                        echo '<li onClick="fill(\''.addslashes($result->country).'\');">'.$result->country.'</li>';
                    }
                echo '</ul>';

                } else {
                    echo 'OOPS we had a problem :(';
                }
            } else {
                // do nothing
            }
        } else {
            echo 'There should be no direct access to this script!';
        }
    }
?>

For more information, visit the following link:

Please visit the following link:

http://www.roseindia.net/tutorial/ajax/jquery/autocomplete.html


October 4, 2012 at 5:12 PM

The above code is autosuggest.php.

Ads









Related Tutorials/Questions & Answers:
AJAX Search
AJAX Search  I have to create a project where the user enters... using PHP and MYSQL as the database. Can somebody please suggest me the AJAX...://www.roseindia.net/tutorial/ajax/jquery/autocomplete.html   continue
Auto Search box using ajax
Auto Search box using ajax   Hi , i want to implement auto search box functionality like google and linkedin using ajax,jsp,servlet, javascript etc.when the value appears on the textbox then we should also be able to select
Advertisements
How to perform search using AJAX?
How to perform search using AJAX?  Hi, I have following HTML code... and hit button, there is a Ajax call to retrieve search results from a simple txt...; <td><label for="status">Search Status</td> <td><input
ModuleNotFoundError: No module named 'django-ajax-search'
ModuleNotFoundError: No module named 'django-ajax-search'  Hi, My... named 'django-ajax-search' How to remove the ModuleNotFoundError: No module named 'django-ajax-search' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'django-ajax-search'
ModuleNotFoundError: No module named 'django-ajax-search'  Hi, My... named 'django-ajax-search' How to remove the ModuleNotFoundError: No module named 'django-ajax-search' error? Thanks   Hi, In your
Auto complete of word search using ajax with java
Auto complete of word search using ajax with java  I want to display... using jsp to design the form. I want ajax sample to achieve this feature. Its like google search. Please help. Thanks in advance
Auto complete of word search using ajax with java
Auto complete of word search using ajax with java  I want to display... using jsp to design the form. I want ajax sample to achieve this feature. Its like google search. Please help. Thanks in advance
JSF Search Application Using Ajax
JSF Search Application Using Ajax      Here, Roseindia Tutorial Section provides you a JSF search application using Ajax. This is a simple application in which, you will see two JSF
ajax
ajax  HI, In my application using ajax if i type a managername... on search button it should display the employee details from database pls help me reg this. thanks KK   Combobox box using Ajax in JSP   i
ajax
ajax  please describe the ajax
Ajax
Ajax  How to learn AJAX
Ajax
Ajax  Hi, What is Ajax? What is the use of Ajax? Thanks   Hi, Ajax is set of technologies used to develop dynamic web applications. In Ajax following technologies is used: a) JavaScript b) XML c) HTTP d) CSS Learn
Ajax
Ajax  how to impliment ajax in registration table using jsp-servlet
Ajax
Ajax  send the example to fetch the data from the server by using ajax in java. for ex:-if there are states which is used to display in frontend we use ajax. send it to me
ajax
ajax  how to connect ajax with mysql without using php,asp or any other scripting language. please answer soon
ajax
ajax  How can we fetch data in ajax through servlet?   "mainpage.jsp" <html> <head> <title>Ajax Example</title>...;/head> <body> <h1 align="center"><font color="#000080">Ajax
ajax
ajax  How can we fetch data in ajax through servlet?   "mainpage.jsp" <html> <head> <title>Ajax Example</title>...;/head> <body> <h1 align="center"><font color="#000080">Ajax
ajax
ajax  How can we fetch data in ajax through servlet?   "mainpage.jsp" <html> <head> <title>Ajax Example</title>...;/head> <body> <h1 align="center"><font color="#000080">Ajax
ajax
ajax  How can we fetch data in ajax through servlet?   "mainpage.jsp" <html> <head> <title>Ajax Example</title>...;/head> <body> <h1 align="center"><font color="#000080">Ajax
Ajax
options. I want to do it using ajax. My table is CREATE TABLE HT<em>
AJAX
ajax. My table is CREATE TABLE HTNEWMETER ( ID NUMBER (10) NOT NULL, METERNO
ajax
ajax  I am facing following problem, I am using ajax to get the data continousely without refreshing. Here i have devided a web page into 3 parts(top,left and right) using table in jsp. On the left part i am displaying some
search
search  how to develop search box and how to retrive data from database..   Please visit the following link: Search box
SEARCH
SEARCH  how can we do search in jsp...? option for search criteria like name and DOB...   Please visit the following links: http://www.roseindia.net/jsp/user-search.shtml http://www.roseindia.net/servlets/search.shtml
AJAX with
AJAX with       Ajax resources, in a digg style, allows the user to register and addd his/her own links Read full Description
Search
Search   Hi, I have a project in which I am trying to enter "Marathi" (Indian local language) data in JSP using JSTL and trying to search data... and tries to search then It shows no data from database
Google Ajax API
Google Ajax API  Hi, What is Google Ajax API? From where I can get in our application. Thanks   Hi, Google AJAX APIs is a JavaScript..., search, or feed-based Internet content into web applications/pages, organized
Ajax Learner - Ajax
Ajax Learner  Hi, This is Ziaul,I am working as Java/j2ee Developer from last one year. i have to use Ajax for my current project.pls guide me how should i proceed to learn Ajax. Thanks and Regards Ziaul Hauqe Siddique 
ajax synchronisation
ajax synchronisation  how to stop ajax execution for some specific time
Ajax tutorials
Ajax tutorials  Hi, Why I should learn Ajax? What is the use of Ajax and which is the best tutorial to learn Ajax? Thanks
Ajax example
Ajax example   Hi, Where can I find Ajax example program? Thanks   Hi, Get it at: Ajax Tutorials First Ajax Example Ajax Login Example Thanks

Ads