2012-02-10 35 views
0

我试图为文本框实现自动完成组件。即时通讯使用jquery ui自动完成插件,它有点像一个下拉列表而不是自动完成的东西。关于JQuery UI自动完成和文本框建议。

我见过的工作,当用户正在写像的例子,它显示了以下一些选项,而且还写了第一个选项的补充选择为“HTML占位符”,所以它看起来像:

|“IM SEARCHING SOMET_”堆栈溢出 |

(我知道你的想法)

我需要引导用户对他的写作,并迫使他选择的是我提出(与JSON或东西)的项目之一,像真正的汽车 - “完成”他正在写的东西。我想在该插件上使用“selectFirst”属性。它似乎没有像它那样。那么,你们建议什么?

我在想像在插件的“open”事件上写一些代码,但是Idk从哪里开始。也许在那里已经有了一些东西,所以我不必像这样浪费一周的时间。

我的代码已经是这样的:提前

$(".destination").autocomplete({ 
      minLength: 2, 
      autoFocus: true, open: function(event, ui){ /* DO THE MAGIC HERE */ }, 
      source: function (request, response) { 
       $.ajax({ 
        url: "@Url.Action("SearchDestinations", "Json")", type: "POST", dataType: "json", 
        data: { term: request.term }, 
        success: function (data) { 
         response($.map(data, function(item){ 
          return { label: item.Description, value: item.Description, id: item.Id }; 
         })); 
        } 
       }) 
      } 
     }); 

感谢(和抱歉,如果这太noobish)!

回答

0

这不是自动完成文本框的非常常见的行为,而且您还没有详细说明为什么要引导用户进行选择(您将如何知道第一个选项总是最佳?)。

如果确实设置了这样的功能,请确保在用户输入之后以默认方式将默认文本的样式设置为方式,以便用户看到他们键入的内容以及您的身份(请参阅谷歌即时通讯使用非常浅的文字来处理搜索结果,同时请注意谷歌不会试图引导您的搜索,而是向您显示即时搜索结果的用途)。用户可能会也可能不会惊讶地发现在他们输入的内容之后出现了额外的文本,并且鉴于他们的注意力集中在文本框上,他们可能倾向于接受作为他们的输入的内容,而不考虑出现在下面的其他选项可能更好。在进行用户测试时,您需要考虑这两点。

话虽这么说,你可以用一个类似的选择访问的第一选择项目的文本中自动完成下拉列表:

$(".ui-autocomplete li:first a").text(); 

然后,使用一般的JavaScript SUBSTR( )方法,您可以只抓取用户输入的内容后的文本,并在用户输入后将其显示在文本框中。

+0

不确定第一选择总是最好的。但应用程序的本质是必须做出选择, – 2012-02-13 13:47:06

+0

如果您不能保证第一选择是最好的,那么听起来您不应该设置应用程序来自动为用户选择一个选项。此外,如果您的问题是您需要确保进行选择,则应该为表单添加有用的字段验证,以确保用户选择一个选项,而不是强制选择用户。 – Derek 2012-02-13 15:37:42