AJAX on select submit HTML get form?

Question

I am currently working on Ajax search suggest input and i am done with it but i just want to make this script when you select suggestion to auto submit the form.

Here is my Javascript:

<script>
function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $.ajax({
      url: "autosuggest.php",
      data: 'act=autoSuggestUser&queryString='+inputString,
      success: function(msg){
            if(msg.length >0) {
                $('#suggestions').fadeIn();
                $('#searchBoxSuggestions').html(msg);
                $('#country').removeClass('load');
            }
      }
    });
    }
}
    function fill(thisValue) {
    $('#keyword').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
}
function fillId(thisValue) {
    $('#country_id').val(thisValue);
    setTimeout("$('suggestionsBox').fadeOut();", 600);
}

</script>

Here is my HTML form:

          <form method="get" action="search.php" autocomplete="on" name="form_search">
  <input type="text" size="25" value="" id="keyword" name="keyword" onkeyup="suggest(this.value);" onblur="fill();fillId();" class="" />
 <input type="hidden" name="country_id" id="country_id" value="" />
 <input type="submit" value="&nbsp;" id="searchbutton" />
 <div class="suggestionsBox" id="suggestions" style="display: none;"> 
 <div id="searchBoxSuggestions"> &nbsp; </div>
 </div>
          </form>

And autosuggest.php if needed:

<?php
if(isset($_REQUEST['act']) && $_REQUEST['act'] =='autoSuggestUser' && isset($_REQUEST['queryString'])) {
   $db_host = 'localhost';
   $db_user = 'root';
   $db_password = 'mypass';
   $db_name = 'mydb';

   $connect = mysql_connect($db_host, $db_user ,$db_password);
   $db = mysql_select_db($db_name,$connect);
   mysql_query("SET NAMES utf8");
   if($db){
    $string = '';
        $queryString = $_REQUEST['queryString'];
        $query = "SELECT * FROM videos WHERE title like '%" .$queryString . "%' and approved='yes' ORDER BY title LIMIT 10";
        $resource = mysql_query($query);

        if($resource && mysql_num_rows($resource) > 0) {
        $string.= '<ul>';
            while($result = mysql_fetch_array($resource)){
            $title= addslashes($result['title']);
            $indexer= addslashes($result['indexer']);
                $string.= '<li onClick="fillId(\''.$indexer.'\');fill(\''.$title.'\');"><b>'.$title.'</b></li>';
            }
        $string.= '</ul>';

        } else {
            $string.= '<li>No Record found</li>';
        }
        echo $string;       
        exit;

   }
   exit;
}

?>

Now with this code when you type into the input field with name keyword it's giving you bellow suggestions with titles.

And now when you click on any suggested title it's putting that title into the input field where you are typing and when you press the submit button it's trigering the search.

How i can make this scirpt to auto submit the form when you click on title insted of putting that title into the input?

Thanks in advance!

score 0 · Answer 1 · answered Nov 11 '13 at 20:50

0

Give a click event to your searchBoxSuggestions div:

$("#searchBoxSuggestions").click(function() {
    $(this).closest("form").submit();
});

answered Nov 11 '13 at 20:50

tymeJV

103,943
14
161
157

When i just added this code to the Javascript nothing happened. It's not submithing the form. Should i do something else expept add this lines of code into my Javascript. I have added this at the end. – user2979725 Nov 11 '13 at 20:54
Hmm...add a log statement in there to see if it's firing. – tymeJV Nov 11 '13 at 20:55

score 0 · Answer 2 · answered Nov 11 '13 at 20:53

0

Modify your fill function like this:

function fill(thisValue) {
    $('#keyword').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 600);
    $('form[name="form_search"]').submit();
}

answered Nov 11 '13 at 20:53

P_Enrique

647
5
15

Mate you ARE AWESOME! Now it works how i want! can you please help me and here: http://stackoverflow.com/questions/19915141/how-to-display-javascript-jquery-value-in-html-page-videojs-display-durration-o/19915363?noredirect=1#comment29633495_19915363 – user2979725 Nov 11 '13 at 20:56
@user2979725 Maybe you'd like to click on "Accept answer", then! – P_Enrique Nov 11 '13 at 21:05
But other problem appears. It's seems it's working okey only in Opera. When i tried this code with Chrome/Safari it's not giving the keyword input any value and it's not showing results because of that. Where can be the problem? – user2979725 Nov 11 '13 at 21:05
Remove the `onblur="fill();fillId();"` from your INPUT field. – P_Enrique Nov 11 '13 at 21:07
Yes now it's working okey! Can you please help me on my other problem? – user2979725 Nov 11 '13 at 21:09

AJAX on select submit HTML get form?

2 Answers2