在搜索过程中突出显示下拉列表中的第一个块

时间:2014-05-07 05:48:05

标签: search gwt

我希望像google +那样搜索事件。当我们搜索朋友时,第一个块会突出显示,当我们输入密钥时,它的值会出现在文本框中。我已经实现了搜索值和使斜体字体成为字体。

   public class AlphaKeyPress implements KeyUpHandler
{
    public void onKeyUp(KeyUpEvent event) 
    {
        String ab =textbox.getText();

        if(ab.length()>0)
        {
            greetingService.server(ab,new AsyncCallback<String>()
            {
                @Override
                public void onFailure(Throwable caught) 
                {
                    Window.alert("Invalid");
                }

                @Override
                public void onSuccess(String result) 
                { 
                    System.out.println("At the client side..."+result);

                    if(result.isEmpty())
                    { 
                        System.out.println("result");

                        p.clear();

                        Label lii = new Label("not found");

                        p.setVisible(true);
                        p.setBorderWidth(1);
                        p.add(lii);

                        RootPanel.get().add(p);
                    }
                    else
                    {
                        p.clear();
                        p.setVisible(false);
                        p.setVisible(true);
                        p.setBorderWidth(1);

                        int l=0;
                        int count=0;

                        for (String retval: result.split("/"))
                        {
                            String match=textbox.getText();
                            String html = retval.replace(match, "<b><i>" + match + "</i></b>");

                            final HTML htm=new HTML(html);

                            htm.setStyleName("green");  

                            if(retval.contains(match))
                            {
                                if(l==0)
                                {
                                    htm.setHTML(html);
                                    if(count==0)
                                    {
                                        htm.addStyleName("add");
                                        count++;
                                    }
                                    else



                                    p.add(htm);

                                    l++;


                                }
                                else 
                                {
                                    htm.setHTML(html);

                                    p.add(htm);

                                    l--;
                                }
                            }
                            RootPanel.get().add(p);

                            htm.addClickHandler(new ClickHandler()
                            {
                                public void onClick(ClickEvent event) 
                                {
                                    String str=htm.getText();
                                    textbox.setText(str);
                                }
                            });
                        }
                    }   
                } 

1 个答案:

答案 0 :(得分:0)

当您迭代结果时,您可以执行以下操作:

。而不是执行for (String retval: result.split("/"))
String[] results = title.split("/");
for (int i=0; i<results.length; i++) {
  if (i==0) {
    //add result with highlighted html
  } else {
    //add result normally
  }
}

如果您想了解html,只需点击Google+上的右键,然后点击“检查元素”。

更新(基于评论):

要在控件上添加鼠标,只需按照与ClickHandler相同的路径执行:

htm.addMouseOverHandler(new MouseOverHandler() {

  @Override
  public void onMouseOver(MouseOverEvent event) {
    //add your css
  }
});

htm.addMouseOutHandler(new MouseOutHandler() {

  @Override
  public void onMouseOut(MouseOutEvent event) {
    // remove your css        
  }
});