标签: jquery-autocomplete

我试图找到一个twitter bootstrap typeahead元素的工作示例,该元素将进行ajax调用以填充它的下拉列表.

我有一个现有的工作jquery自动完成示例,它定义了ajax url以及如何处理回复

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { minChars:3, max:20 };
    $("#runnerquery").autocomplete('./index/runnerfilter/format/html',options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我需要更改什么来将其转换为typeahead示例？

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var options = { source:'/index/runnerfilter/format/html', items:5 };
    $("#runnerquery").typeahead(options).result(
            function(event, data, formatted)
                {
                    window.location = "./runner/index/id/"+data[1];
                }
            );
       ..

我将等待" 添加远程源支持预先输入 "问题得到解决.

我添加了两个jQuery UI Dropdown Autocomplete脚本.现在我希望获得第二个下拉列表的值,并希望单独存储在变量中.怎么可能？

任何想法或建议？谢谢.

我的小提琴: 样品

我的JS代码:

(function($) {
            $.widget("ui.combobox", {
                _create: function() {
                    var self = this,
                    select = this.element.hide(),
                    selected = select.children(":selected"),
                    value = selected.val() ? selected.text() : "";
                    var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({
                        delay: 0,
                        minLength: 0,
                        source: function(request, response) {
                            var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                            response(select.children("option").map(function() {
                                var text = $(this).text();
                                if (this.value && (!request.term || matcher.test(text)))
                                    return {
                                    label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"),
                                    value: text,
                                    option: this
                                }; …

我正在使用以下代码将我的jQuery UI自动完成项呈现为HTML.这些项在自动完成控件中正确呈现,但我一直收到此javascript错误,无法移动它.

Firefox 无法转换JavaScript参数

Chrome 无法设置未定义的属性"_renderItem"

  donor.GetFriends(function (response) {
    // setup message to friends search autocomplete
    all_friends = [];
    if (response) {
        for (var i = 0; i < response.all.length - 1; i++) {                
                all_friends.push({
                    "label":"<img style='padding-top: 5px; width: 46px; height: 46px;' src='/uploads/profile-pictures/" +
                        response.all[i].image + "'/><br/><strong style='margin-left: 55px; margin-top: -40px; float:left;'>" +
                        response.all[i].firstname + " " + response.all[i].lastname + "</strong>",

                    "value":response.all[i].firstname + " " + response.all[i].lastname,
                    "id":response.all[i].user_id});
            }
        }        

    $('#msg-to').autocomplete({
        source:all_friends,
        select:function (event, ui) {               
            // set the id …

我以一种相对简单的方式使用jQuery的自动完成:

$(document).ready(function() {
  var data = [ {text: "Choice 1"}, 
               {text: "Choice 2"}, 
               {text: "Choice 3"} ]

$("#example").autocomplete(data, {
  matchContains: true,
  minChars: 0,
  formatItem: function(item) 
    { return item.text; }
    }
  );
  });

如何添加一个onclick事件(如按钮或链接),它将显示自动完成的所有可用选项？基本上我正在寻找自动完成和选择/下拉元素的混合.

谢谢!

我正在使用jQuery AutoComplete插件与ajax结合使用.你知道如何在执行ajax搜索时显示进度指示器吗？

这是我目前的代码.

<script type="text/javascript">
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers');
</script>

<div>
    <input type="text" id="autocomplete-textbox" />
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span>
</div>

FindUsers URL返回内容中的用户列表.

是否可以禁止JQuery UI自动完成小部件中的自由文本输入？

例如,我只希望允许用户从自动完成列表中显示的项目列表中进行选择,并且不希望他们能够编写一些随机文本.

我没有在演示/文档中看到任何描述如何执行此操作的内容.

http://jqueryui.com/demos/autocomplete/

我正在使用这样的自动完成功能

$('#selector').autocomplete({
    source: url,
    minlength: 2,
    select: function (event, ui) {
        // etc
    }

我已经为Bootstrap输入实现了一个jQuery自动完成功能.jQuery自动完成工作正常,但我希望将结果看作组合,我猜它现在正在发生,因为我正在使用BootStrap.

这是我正在分配自动完成的字段:

<div class="form-group">
  <label>Employee</label>
  <input class="form-control" name="txtEmployee" placeholder="Trabajador">
</div>

$(this).autocomplete({

  source: function(request, response) {
    $.ajax({
      url: '@Url.Content("~/Employee/SearchEmployee")/',
      type: 'POST',
      contentType: 'application/json',
      dataType: "json",
      data: JSON.stringify({
          employerId: 1,
          searchStr: me.val()
      }),
      success: function(data) {
        if (data.success) {

          response($.map(data.data, function(item) {

            return {
              label: "(" + item.EmployeeNumber + ") " + 
                           item.FirstName + " " + 
                           item.MothersLast + ", " + 
                           item.FathersLast,
              employeeId: item.EmployeeId
            }
          }));
        } 
      }
    });
  },
  minLength: 3
});

结果显示但是像这样:

如何使用Bootstrap设置结果样式,以便我可以看到它们如dropdownlist？

当我尝试使用下面的代码实现自动完成时,我得到一个错误说明:

.data("autocomplete") is undefined

然而,如果我从最后删除.data()方法它工作正常(只是没有.data()提供的可自定义图形).谁能告诉我出了什么问题？

$("input#testInput").bind("autocompleteselect", function (event, ui) {

  }).autocomplete({
      appendTo: "#autoCompList",
      source: function (request, response) {
          $.ajax({

              url: JSONP CALL URL
              dataType: "jsonp",
              data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: request.term
              },
              success: function (data) {
                  response($.map(data.data, function (item) {
                      fbPageJson = item;
                          return {
                              label: item.name,
                              image: item.picture,
                              json: item,
                          }
                  }));
              },
          });
      }

  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
  };

我指的是JörnZaefferer的jQuery Autocomplete v1.1插件[来源:http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/],因为这个插件似乎有很多变种.

我正在尝试在用户开始输入时将其他参数传递给服务器,因为我有多个字段,我希望自动完成提供建议.

除了查询之外,我想将输入名称属性发送到服务器,但我似乎无法在extraParams中使用$(this).attr('name').

我的jQuery:

   $('.ajax-auto input').autocomplete('search.php', {
     extraParams: {
      search_type: function(){
       return $(this).attr('name');
      }
     }
   })

这是我的HTML.

 <form method="post" action="#" id="update-form" autocomplete="off">
  <ol>
         <li class="ajax-auto">
             <label for="form-initials">Initials</label>
                <input type="text" id="form-initials" name="initials" />
            </li>
         <li class="ajax-auto">
             <label for="form-company">Company</label>
                <input type="text" id="form-company" name="company" />
            </li>
  </ol>
 </form>

有什么建议？

如果没有结果,我试图在下拉菜单中显示"无结果"消息.因此,例如,如果我在文本字段中键入"ABCD",并且没有匹配的实体,则显示消息"无结果".将显示.

在通过stackoverflow查看完成此操作的各种不同方法并尝试其中一些之后,我仍然无法使其工作.

如果没有找到结果,如何在下拉菜单中添加"无结果"消息？

jQuery的:

    $element.autocomplete({
        source: function (request, response) {            
            $.ajax({
                url: thUrl + thQS,
                type: "get",
                dataType: "json",
                cache: false,
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        if (data.indexOf(item) === -1) {
                            return { label: "No Results." }
                        } else {
                            return {
                                label: item.Company + " (" + item.Symbol + ")",
                                value: item.Company
                            }
                        }
                    }));
                }
            });
        },
        minLength: that.options.minLength,
        select: function (event, ui) {
               reRenderGrid();
        } …