Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question AutoSuggest select not working

    Hi,

    I am trying to write google like search (instant/Auto search) that shows values from database depending on the characters typed in input field. The database results are displaying while typing the chars. However, if I select any option from list of available list options, then the selected value is not updating into textbox. Any help will be appreciated.

    Code:
     <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Auto Complete</title>
    <script src="jquery/jquery.js" type="text/javascript"></script>
     
    <script type="text/javascript">
    function lookup(inputString) {
    if(inputString.length == 0) {
    $('#suggestions').hide();
    } else {
    $.post("states.jsp", {queryString: ""+inputString+""}, function(data){
    if(data.length >0) {
    $('#suggestions').show();
    $('#autoSuggestionsList').html(data);
    }
    });
    }
    }
    function fill(thisValue) {
    $('#inputString').val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
    }
    </script>
    <style type="text/css">
    body {
    font-family: Helvetica;
    font-size: 13px;
    color: #000;
    }
    h3 {
    margin: 0px;
    padding: 0px;
    }
    .suggestionsBox {
    position: relative;
    left: 260px;
    margin: 0px 0px 0px 0px;
    width: 200px;
    background-color: #7845DD;
    -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: #DD45CD;
    }
    </style>
    </head>
    <body>
    <div>
    <form>
    <div> <h3><font color="red">Indian States</states></font></h3>
    <br /> Enter India State Name to see autocomplete
    <input type="text" size="30" value="" id="inputString"
    onkeyup="lookup(this.value);" onblur="fill();" />
    </div>
    <div class="suggestionsBox" id="suggestions" style="display: none;">
    <div class="suggestionList" id="autoSuggestionsList">
    </div>
    </div>
    </form>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    There is nothing in this code that would cause the behaviour you mention. Added: Oops, missed your fill method! You need to add a, perhaps, click event to the listed suggestions that then grabs the text and sets this as the value of your input.

    What are the suggestions - are they a ul/li list or select/options? In either case it is probably the click event that you could use.

    Because your list of suggestions are dynamically added to the HTML you need to use the jQuery live() method (or for jQuery 1.7, on()). You can't just use click() directly, as these elements won't exist on page-load. Something like:

    Code:
    $('.suggestions').live('click', function () {
        $('#inputString').val($(this).val());    // or ($(this).text());
    });
    which assumes your (new) suggestions each have the class "suggestions".
    Last edited by AndrewGSW; 08-11-2012 at 11:47 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    hi,

    I have the events in below code. This code retreves the database values.


    Code:
    <%
    String name=request.getParameter("queryString");
    try {
    	Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
    	Connection con = DriverManager.getConnection("jdbc:sqlserver://localhost", "user", "password");
    	Statement st=con.createStatement();
    //Add the data into the database
    String sql = "SELECT EMP_EMPLOYEE_ID, EMP_FNAME, EMP_LNAME FROM UAP.dbo.UAP_EMPLOYEE where EMP_FNAME LIKE '%"+name+"%' OR EMP_LNAME LIKE '%"+name+"%';";
    Statement stm = con.createStatement();
    stm.executeQuery(sql);
    ResultSet rs= stm.getResultSet();
    while (rs.next ()){
    out.println("<li onclick='fill("+rs.getString("EMP_FNAME")+");'>"+rs.getString("EMP_FNAME")+"</i>");
    }}catch(Exception e){
    out.println("Exception is ;"+e);
    }
    %>

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Of course, you could always investigate the jQuery autocomplete plug-in. You just need to feed your post data as the plug-in's, autocomplete-object's source. But, as you're almost there, there is probably no initial benefit.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Have you got a link to the page?

    Try removing onblur="fill();" from your input - the suggestion may be used, but this code may immediately remove the text.
    Last edited by AndrewGSW; 08-11-2012 at 11:55 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    Thanks for your speedy reply. Is there any code change that you recommend in above files instead of using the plug-in that you suggested. Also I am getting the Values from DB and not hardcoded as shown in example.
    Last edited by naveendk.55; 08-11-2012 at 11:57 PM.

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Try removing onblur="fill();" from your input - the suggestion may be used, but this code may immediately remove the text.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    Nope, removing fill() didn't help.

    Also Once I click on a value from drop down list, then I get an error as below.

    "NASH is undefined".


    In above line, NASH is a value that I clicked from the dropdown list.

  • #9
    Regular Coder
    Join Date
    Aug 2011
    Posts
    101
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question

    I resolved it by changing the code in JSP file to:


    Code:
    click='fill(\""+rs.getString("EMP_FNAME")+"\");'>"+rs.getString("EMP_FNAME")+" </li>");

    thanks for trying to help you.

  • #10
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    out.println("<li onclick='fill('"+rs.getString("EMP_FNAME")+"');'>"+rs.getString("EMP_FNAME")+"</i>");
    There are a couple of extra apostrophes in the above code example.

    Code:
    fill(NASH)      // will look for something called NASH, which doesn't exist
    fill('NASH')    // passes the string 'NASH' to the function.
    or you might need this version:

    Code:
    out.println("<li onclick=\"fill('"+rs.getString("EMP_FNAME")+"');\">"+rs.getString("EMP_FNAME")+"</i>");
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #11
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You got there just before (or just after..?) me
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •