jquery自动完成自定义菜单项

时间:2013-07-01 14:01:15

标签: jquery jquery-autocomplete

我正在搜索jquery autocomplete来搜索服务器上的实体。我希望能够通过包含“创建实体”项作为最后结果来创建搜索结果列表中的新实体,或者只有在没有找到结果时才能生成结果。从文档看起来,当我选择“从结果列表中创建实体”时,我会使用select事件创建一个新实体。但是,我有点不确定将此额外项添加到列表中的正确方法,包括当没有搜索结果时。

我正在使用JQuery UI 1.10

1 个答案:

答案 0 :(得分:0)

首先,您可以覆盖源方法以返回自定义响应集。在这种情况下,Create Entity始终附加到返回的列表中。然后处理select事件以提示实体。

 var availableTags = ['car', 'duck', 'house'];
 $('#elementID').autocomplete({
      source: function( request, response ) {
          var responses = $.ui.autocomplete.filter(availableTags, request.term);
          responses.push('Create Entity');
          response( responses );
      },
      select: function( event, ui ) {
          var choice = ui.item.value;
          if (choice == 'Create Entity') {
              var selection = prompt('New Entity', 'default value');
              availableTags.push(selection);
              console.log(selection);
              this.value = selection;
              return false;
          }
      }
  });

jsFiddle