2016-04-26 9 views
0

Ich verwende Autovervollständigung API von jquery, um den Namen von der Datenbank abzurufen. Aber ich möchte eine Warnmeldung bei der Auswahl eines Namens anzeigen aus dem Textfeld angezeigt. Ich werde ein Bild zum besseren Verständnis zeigen. mit "S"Welches Ereignis wird verwendet, um eine Warnmeldung beim Auswählen eines Werts im Textfeld anzuzeigen

enter image description here

Wenn i-Typ "S" wird alle Datensätze angezeigt werden soll. Also die Frage ist, wenn ich zB: - "Sparsh Hospital" dann sollte die Webseite eine Warnmeldung mit "Sparsh Hospital" anzeigen. Ich habe viele Event-Handler versucht, aber keiner von ihnen funktioniert. Wenn Event-Handler dann vorschlagen mich bitte. Mein Code ist wie unten

index.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css/style.css" /> 
    <script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script> 
    <script src="JS/jquery.autocomplete.js"></script> 

    <script> 
    $(document).ready(function() { 
     var selectedValue = ''; 
     $("#country").autocomplete("list.jsp") 
     $('#country').change(function() { 
       selectedValue = $(this).val(); // store value in variable 
       alert(selectedValue = $(this).val()); 
       }); 
       }); 
    </script> 

</head> 
<body> 
<br><br><center> 
<font face="verdana" size="2"> 

<br><br><br><br> 

    Select Country : 
    <input type="text" id="country" name="country" class="input_text"/> 

</font> 
</body> 
</html> 

list.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> 
<%@page import="java.sql.*"%> 
<%@page import="java.util.*"%> 

<% 
    try{  
     String s[]=null; 

     Class.forName("com.mysql.jdbc.Driver"); 
     Connection con =DriverManager.getConnection("jdbc:mysql://localhost:3306/marketing_database","root","root"); 
     Statement st=con.createStatement(); 
     ResultSet rs = st.executeQuery("select Company_Name from marketing_database.lead"); 

      List li = new ArrayList(); 

      while(rs.next()) 
      {    
       li.add(rs.getString(1)); 
      } 

      String[] str = new String[li.size()];   
      Iterator it = li.iterator(); 

      int i = 0; 
      while(it.hasNext()) 
      { 
       String p = (String)it.next(); 
       str[i] = p; 
       i++; 
      } 

      //jQuery related start  
       String query = (String)request.getParameter("q"); 

       int cnt=1; 
       for(int j=0;j<str.length;j++) 
       { 
        if(str[j].toUpperCase().startsWith(query.toUpperCase())) 
        { 
         out.print(str[j]+"\n"); 
         if(cnt>=5) 
          break; 
         cnt++; 
        } 
       } 
      //jQuery related end  


     rs.close(); 
     st.close(); 
     con.close(); 

      } 
     catch(Exception e){ 
      e.printStackTrace(); 
     } 

%> 
+0

Es wäre wahrscheinlich am besten, wenn Sie die Autocomplete-Plugin Veranstaltung Haken verwenden, wenn es welche gibt. Können Sie uns, wenn möglich, eine Arbeitsfiedel geben? – KiiroSora09

+0

@ KiiroSora09 Ich kann nicht arbeiten, weil Mysql-Datenbank mit dem Code –

Antwort

2

Wenn Sie mit devbridge des Ajax Autocomplete for jQuery:

Verwenden Sie das Objekt Setting die Instanz einzurichten, mit der URL und ein Event-Handler auf einen Wert Auswahl:

$(document).ready(function() { 
    var selectedValue = ''; 
    $('#country').autocomplete({ 
    serviceUrl: 'list.jsp', 
    onSelect: function(suggestion) { 
     selectedValue = suggestion.value; 
     alert('You selected: ' + suggestion.value + ', ' + suggestion.data); 
    } 
    }); 
}); 

Wenn Sie jQuery UI Autocomplete verwenden:

das autocompleteselect Ereignis Griff anstelle des change-Ereignisses, und greifen Sie auf den Wert des ausgewählten Elements zu, indem Sie ui.item.value statt .val() verwenden, wobei ui das zweite in der Ereignishandlerfunktion angegebene Argument ist.

$(document).ready(function() { 
    var selectedValue = ''; 
    $('#country').autocomplete({ 
     source: 'list.jsp', 
     select: function(e, ui) { 
     selectedValue = ui.item.value; 
     alert(selectedValue); 
     } 
    }); 
}); 

Siehe https://api.jqueryui.com/autocomplete/#event-select

+0

verbunden ist Es zeigt nicht die "Warnung" Nachricht –

+0

@chittioneterahertz Welche Bibliothek verwenden Sie? Kannst du die Seite verlinken? – lerouche

+0

Ich weiß nicht über den Link, aber ich habe die Bibliotheken heruntergeladen und in einem Ordner (der ich in einem Eclipse-Projekt erstellt) und verwenden sie. Die Bibliotheken sind "jquery-1.4.2.min.js" und "jquery.autocomplete. js " –

Verwandte Themen