Javascript 在文本框中选择值时，使用什么事件显示警告消息_Javascript_Jquery_Ajax_Jsp

Javascript 在文本框中选择值时，使用什么事件显示警告消息

javascript jquery ajax jsp

Javascript 在文本框中选择值时，使用什么事件显示警告消息,javascript,jquery,ajax,jsp,Javascript,Jquery,Ajax,Jsp,我正在使用jquery的autocomplete api从数据库中获取名称。但是我想显示一条关于从显示的文本框中选择名称的警告消息。为了更好地理解，我将显示一幅图像当我键入S时，它将显示包含S的所有记录。因此，问题是如果我选择例如：-Sparsh Hospital，则网页应显示包含Sparsh Hospital的警报消息。我尝试了许多事件处理程序，但它们都不起作用。因此，如果有任何事件处理程序，请建议我。我的代码如下所示 index.jsp <!DOCTYPE html PUBLIC "

我正在使用jquery的autocomplete api从数据库中获取名称。但是我想显示一条关于从显示的文本框中选择名称的警告消息。为了更好地理解，我将显示一幅图像

当我键入S时，它将显示包含S的所有记录。因此，问题是如果我选择例如：-Sparsh Hospital，则网页应显示包含Sparsh Hospital的警报消息。我尝试了许多事件处理程序，但它们都不起作用。因此，如果有任何事件处理程序，请建议我。我的代码如下所示

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(); 
        }

 %>

如果您正在使用devbridge的：

使用设置对象设置实例，并在选择值时使用URL和事件处理程序：

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

如果您使用的是jQuery UI：

处理autocompleteselect事件而不是change事件，并使用ui.item.value而不是.val访问所选项目的值，其中ui是事件处理程序函数中提供的第二个参数

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

如果您正在使用devbridge的，请参见：

使用设置对象设置实例，并在选择值时使用URL和事件处理程序：

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

如果您使用的是jQuery UI：

处理autocompleteselect事件而不是change事件，并使用ui.item.value而不是.val访问所选项目的值，其中ui是事件处理程序函数中提供的第二个参数

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

请参见

如果有，最好使用autocomplete插件的事件挂钩。如果可能的话，你能给我们一个可以工作的提琴吗？@KiiroSora09我不能提供工作，因为mysql数据库与代码相关。如果有，最好使用autocomplete插件的事件挂钩。如果可能的话，你能给我们一把工作小提琴吗？@KiiroSora09我不能提供工作，因为mysql数据库和code@chittioneterahertz你在用什么图书馆？你能链接这个页面吗？我不知道这个链接，但我下载了这些库，并将它们放在我在eclipse项目中创建的一个文件夹中，然后使用它。这些库是jquery-1.4.2.min.js和jquery.autocomplete。js@chittioneterahertz我可以从您的代码中看出这一点，但是jquery.autocomplete.js可能有很多不同的库，特别是如果你重命名了它。可能是这个吗？这两种方法对我都不起作用。我使用了这个网站的代码，这个插件非常旧，已经被jqueryui的Autocomplete所取代。您应该使用jQuery UI的最新版本，然后使用我提供的代码。@chittioneterahertz您使用的是什么库？你能链接这个页面吗？我不知道这个链接，但我下载了这些库，并将它们放在我在eclipse项目中创建的一个文件夹中，然后使用它。这些库是jquery-1.4.2.min.js和jquery.autocomplete。js@chittioneterahertz我可以从您的代码中看出这一点，但是jquery.autocomplete.js可能有很多不同的库，特别是如果你重命名了它。可能是这个吗？这两种方法对我都不起作用。我使用了这个网站的代码，这个插件非常旧，已经被jqueryui的Autocomplete所取代。您应该使用jQueryUI的最新版本，然后使用我提供的代码。