Question

我正在实施一个AJAX自动完成功能。我们的想法是根据搜索条件将HTML页面呈现在输入框的右侧。

HTML PART：[并使用rails：layout =＆gt;假]

当搜索字词 dolore 时，要呈现的页面如下所示：

{"label":"laboriosam praesentium amet ea et qui non consequatur quod","value":1}
{"label":"aut omnis non quia aut animi","value":2}
{"label":"eveniet pariatur dicta quae ut","value":3}
{"label":"voluptatem ad quaerat aut atque est alias a quo","value":4}
{"label":"dolorem labore nisi natus labore dolorum eum","value":5}

AJAX部分：[使用AJAX直接自动完成]

  $(document).ready(function(){
    $('#title_name').keyup(function(){
      var input = $('#title_name').val();
     if (input.length > 2) {
      $.ajax({
           url: "/search/titles",
           data: "search="+input,
           success: function(msg){
             $("#suggest-title").html(msg);
             $("#suggest-title div .titlelist").mouseover(function(){
               $("#suggest-title div .titlelist").removeClass("search_hover");
               $(this).addClass("search_hover");
             });
             $("#suggest-title .titlelist").click(function(){
              var field_value = $(this).html();
              $("#title_name").val(field_value);
              $("#title_name").append('<input type="hidden" name="title_id" value="5" />');
              $("#suggest-title").remove();
             });
           }
         });
     }
    });
  });

TODO：想法是在搜索时向用户显示“标签”部分，但将ID发送回服务器。

Answer 1

为什么不使用jqueryui autocomplete？

然后你可以这样做：

var availableTags = [{label:"ActionScript", id:1},{label: "AppleScript", id:2}];
$("#tags").autocomplete({
    source: availableTags,
    select: function(evt, ui){
        alert(ui.item.id);
        //post the id to the server
    }
});

在这里摆弄：http://jsfiddle.net/rmEr7/1/

显示标签但是在jquery中发送id

1 个答案: