Latest Tutorials| Questions and Answers|Ask Questions?|Site Map



Home Answers Viewqa Ajax AJAX Search
Login         

View Questions and Answers by Category

Advertisements


 
Have Programming Question? Ask it here!
 
 
 


Saakshi Dikshit
AJAX Search
3 Answer(s)      2 years and a month ago
Posted in : Ajax


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.


Advertisement
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.



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
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
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
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
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  How to learn AJAX
ajax
ajax  please describe the 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 include ajax in jsp page?   Hi, Please read Ajax First Example - Print Date and Time example. Instead of using PHP you can write your code in JSP. Thanks
ajax
ajax  how to connect ajax with mysql without using php,asp or any other scripting language. please answer soon
Ajax - Ajax
Ajax  What is Ajax ? How one can use ajax with Java
ajax with php - Ajax
ajax with php  how to do autocomplete search using ajax wit php in object oriented format?.. data should me retrive from database.. plz the way?.. give some sample codings
Ajax
in a tabular form. Same for >33kv We can use ajax where instead of a link a radio button can fetch the data and can populate a table.If ajax can be used
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
AJAX - Ajax
AJAX  what is Ajax?WHAT IS THE USAGE OF IT?WHERE WE HAVE TO USE IT? GIVE ME EXPLANATION WITH EXAMPLE?  Hi friend, Ajax : Asynchronous JavaScript and XML or Ajax for short is new web development technique used
Search index
Search index  how to write code for advanced search button
AJAX - Ajax
AJAX  What is AJAX?how we will use it in java?what is the use of AJAX?give me example?   hi friend, Ajax plays a major role... characteristics have made it popular among the users to develop their site using Ajax
Hibernate Search
Hibernate Search  Where to learn Hibernate Search module? Thanks   Hi, Check the tutorial: Hibernate Search - Complete tutorial on Hibernate Search Thanks
Advertisements
 

 

 

DMCA.com