#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    8
    Rep Power
    0

    PHP-Javascript: Auto complete textbox (if no result, then write something)


    Hello guys,

    I have added an auto complete textbox in my website.
    Below you can see the code for my form (html code):

    PHP Code:
    <form enctype="multipart/form-data" name="myForm" action="" onsubmit="return validateForm();" method="post">     
    University Name: <input type="text" size="20" name="assocUniName" value="" id="uniString" onkeyup="lookup(this.value);" onblur="fill();" /></div>             
    <
    div class="suggestionsBox" id="suggestions" style="display: none;"><div class="suggestionList" id="autoSuggestionsList">&nbsp;</div></div></div>
    </
    form
    So I'm using the javascript functions ''look'' and ''fill''.
    PHP Code:
    function look(uniString) {
    if(
    uniString.length == 0) {   
    $(
    '#suggestions').hide();

    else 
    {                             
    $.
    post("autosuggestions.php", {universityString""+uniString+""}, function(data){
    if(
    data.length >0) {                                             
    $(
    '#suggestions').show();                                             
    $(
    '#autoSuggestionsList').html(data);                                    
    }                             
    });                     
    }             
    }

    function 
    fill(thisValue) {  
    $(
    '#uniString').val(thisValue);
    setTimeout("$('#suggestions').hide();"200);

    the first function is calling a php file where I retrieve the data from my database. The php code is:
    PHP Code:
    $db = new mysqli('localhost''root@localhost''''dbtest');          
    if(!
    $db) {         
    echo 
    'ERROR: Could not connect to the database.';     

    else 
    {         
    if(isset(
    $_POST['universityString'])) {             
    $universityString $db->real_escape_string($_POST['universityString']);
    if(
    strlen($universityString) >0)
    {                                  
    $query $db->query("SELECT uni_name FROM university WHERE uni_name LIKE '$universityString%' LIMIT 5");                 
    if(
    $query) {
         while (
    $result $query ->fetch_object()) {
            echo 
    '<ul><li onClick="fill(\''.$result->uni_name.\');">'.$result->uni_name.'</li></ul>';                               
    }                                         


    So the script works fine. The problem is that when I don't select something from the autosuggestion results I cannot type a new value. So let's say that I want to add a new university in my database, I should type in the box the university name and check if a university is already in the database, if not then allow me to type it myself. Unfortunately I can't, the only thing I can do is to select a result from the retrieved universities.

    Any help please?


    PS. The code doesn't look good I know, I tried to just copy and paste it using the PHP icon but for some reason it messed up the lines etc... Sorry for that
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    22
    Rep Power
    0
    On skimming the code, I would think that you could rewrite the fill function to:

    Code:
    function fill(thisValue) {   
    IF thisValue is in #suggestions
    THEN
       $('#uniString').val(thisValue); 
    ELSE
       \\code to add uniString to database, set thisValue
    setTimeout("$('#suggestions').hide();", 200); 
    }
    However, what I also see done frequently is for a separate link right beside it to "add university to the database". It's an extra step for the users, but it would prevent typos/abbreviations. Perhaps it would be easier to code too.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2013
    Posts
    8
    Rep Power
    0
    Thank you so much. It works

IMN logo majestic logo threadwatch logo seochat tools logo