JavaScript使用jQuery ui Autocomplete在Firefox中失败

时间:2011-10-09 01:33:43

标签: javascript jquery-ui servlets jquery

我正在开发一个JSF 2.0网络应用程序,我在传入一个由不同单词组成的字符串时遇到了麻烦,这些单词由“|”分隔使用servlet来实现jQuery的AutoComplete。它在IE中运行良好,但似乎无法在Firefox中检索任何数据。

我的XHTML文件是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

<ui:composition template="/WEB-INF/templates/base.xhtml">

    <ui:define name="head">

        <script>
        $(document).ready(function(){

                //var availableTags = "yes|maybe|no".split('|');

                $.ajax({
                    type:   'POST',
                    cache:  'false',
                    data:   'codeType=allergyList',
                    url:    '/miloWeb/Autocomplete',
                    async:  false,
                    success: function(data){
                        availableTags = data.split('|');    
                    },
                    error: function (xhr, ajaxOptions, thrownError){
                        alert(ajaxOptions);
                    }   
                });

                $("#pAllergy").autocomplete({
                    source: availableTags
                });

            });

        </script>
    </ui:define>    

<ui:define name="content">

        <h2>Allergy List</h2>
        <div>
        <center>
            <br />
            <br />
                <h:outputText styleClass="description" for="pAllergy">Allergy: </h:outputText>  
<h:inputText id="pAllergy" value="#{allergyListBB.allergyList.allergy}" size="30"></h:inputText>

                </tr>
                <tr>
                    <td><button onclick="return false;" id="addAllergy">Add</button> </td>                      
                </tr>
            </table>
        </center>
        <h:inputHidden id="delId" value="#{allergyListBB.rowId}"></h:inputHidden>
        </div>

</ui:define>

代码的最后一部分是进入我的Servlet并从DB中检索一个字符串(即cheese | chocolate | chery | chestnut |)然后进入变量availableTags这就是我们通过的进入自动完成。

我的servlet看起来像这样:

package com.bravo.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.bravo.codeMaster.codeMaster;
import com.bravo.dropdowns.codeMedicationList;

/**
 * Servlet implementation class Autocomplete
 */
@WebServlet("/Autocomplete")
public class Autocomplete extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public Autocomplete() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getOutputStream().print("Unauthorized Access.");
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String codeType = request.getParameter("codeType");
        response.getOutputStream().print(codeMaster.getStringList(codeType));
        // This might as well be "response.getOutputStream().print("one|two|three|")
        // for testing purposes, just to make sure it's returning something.
    }

}

XTRA评论:在我看来,如果我将变量availableTags设置为任何字符串字符串,那么当我设置$(“#pAllergy”)。autocomplete()时,我无法更改它。所以我需要从Servlet中获取正确的字符串。请帮助我,我似乎无法弄清楚为什么它在Firefox中失败而不在IE中。我非常感谢你的帮助!

2 个答案:

答案 0 :(得分:3)

尝试:

//...
dataType: 'text',
success: function(data){
    var availableTags = data.split('|');    
    $("#pAllergy").autocomplete({
        source: availableTags
    });
},
//...

答案 1 :(得分:1)

您忘记在servlet中设置HTTP Content-Type响应标头。假设它是text/plain,您需要在之前添加以下行,以便将任何位写入响应:

response.setContentType("text/plain");

这样jQuery可以正确地进行“智能猜测”。