标签: jquery-ui-autocomplete

使用jQueryUI自动完成功能调用JSON时遇到了很大的问题.我有这个相当简单的JS:

$(document).ready(function() {
    $('#Editor_Tags').autocomplete({
        source: "/Forums/Ajax/GetTags",
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.TagName);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });
});

这是我试图返回的模型:

public class TagView
{
    public int TagId { get; set; }
    public string TagName { get; set; }
    public …

我在textarea上使用jQuery UI Autocomplete插件

我想要的是当用户将鼠标悬停在自动完成列表上时,不应修改textarea内容

这意味着,如果用户滚动列表或悬停在选项上,则textarea内容不应更改.只有在选择选项时才会发生更改.

我有以下形式的 json 数组：

[{"label":<some-label>,"spellings":[<list of spellings>]}, ...]

我需要使用 jquery ui 自动完成来解析上面的数组。但是，有一些限制：

1. 自动完成建议应涉及“拼写”的匹配，但应仅建议相应的“标签”。例如，如果一个“标签”有 n 个“拼写”，那么自动完成应该只显示 n 个“拼写”的特定“标签”。
2. 从提供的建议中进行选择时，相应的“标签”应仅反映在文本输入框中。

我应该如何处理它？任何指针？

并且，如何迭代对应“标签”的“拼写”列表？

这就是我想要做的，但输出乱码。

var labels = []
var values = [] 
$.getJSON($url, function(data) { 
  $.each(data, function(key, val) { 
    for (var v in val.value)
      values.push(val.value[v])
    labels.push(val.label)
}); 
$("#text1").autocomplete({ 
  minLength: 2, 
  source: values, 
  focus: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  }, 
  select: function(event, ui) { 
    $("#text1").val(ui.item.label); 
    return false; 
  } 
});
});

我已经实现了ui自动完成小部件。就我而言，我提供了固定的建议列表。

当我输入该字段并将其填充时，我想选择与输入字段中的文本相等的建议。

有什么建议怎么做？

我正在使用jquery-ui自动完成并在自动完成功能内部进行ajax调用我正在调用我的控制器动作返回Json,现在每件事都工作正常我想在建议中显示图像下拉,我也在服用json中的图像URL如何在建议中显示图像以及Name

JavaScript的

 function log(message) {
            $("<div>").text(message).prependTo("#log");
            $("#log").scrollTop(0);
        }

        $("#search").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetCompanyNames",
                    dataType: "jsonp",
                    data: "searchterm=" + request.term,
                    success: function (data) {
                        response($.map(data, function (item) {
                            alert(item.Value);
                            return {
                                label: item.Name,
                                value: item.Name
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                alert(ui.item.Name);
            alert(ui.item.Value);
            alert(ui.item.LogoUrl);
            },
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            }
        });

    });

控制器中的行动:

    public JsonResult GetCompanyNames (string searchterm)
    {
        var companies = context.companyService.Query().Where(x => …

我想在我的Web应用程序中使用Jquery自动完成,但遇到问题.我正在ASP.NET和JQuery中开发我的应用程序.

以下是Autocopmlete'成功'功能的一部分:

success: function (data) {
     response($.map(data.d, function (item) {
         return {
              label:  item.key,
             value: item.value
            }
       }));
     },

我的webservice返回以下JSON:

"[{"key":"Bread","value":"3"}]"

当我运行它时,我收到Javascript错误:

Uncaught TypeError: Cannot use 'in' operator to search for '42' in [{"key":"bread","value":"3"}] 

从我可以看出,看起来返回的JSON的格式不是$ .map函数.此外,结果可能会返回几个项目,而不仅仅是一个项目,如上所示.

任何人都可以帮我解决这个问题.我使用JSON的dataType并GET为type在Ajax调用.

嗨，大家好，我从链接中下载了搜索框建议

搜索框建议

该链接中有一个.js文件 http://code.jquery.com/ui/1.10.3/jquery-ui.js

问题是426kb的.js大小。。无论如何，是否可以减少其中的代码，或者它们对于搜索框建议的简便编码。。在jQuery或JavaScript中，请帮帮我。

我的要求是当用户在输入字段之一输入一些字符（至少 3 个）时显示几个选项，这些字符也可能会动态添加。

由于数据很大，我无法在页面加载时加载数据。有一个 ajax 调用来获取过滤后的数据。

我遇到的问题是Expected identifier第 2 行页面加载时出错。那么，您能告诉我下面的代码有什么问题吗？

$(document).on('keydown.autocomplete', 'input.searchInput', function() {                
            source: function (request, response) { // Line # 2
            var id = this.element[0].id;

            var val = $("#"+id).val();             
            $.ajax({                     
                    type : 'Get',
                    url: 'getNames.html?name=' + val,
                    success: function(data) {
                        var id = $(this).attr('id');
                        $(this).removeClass('ui-autocomplete-loading'); 
                        response(data);
                    },error: function(data) {
                          $('#'+id).removeClass('ui-autocomplete-loading');  
                    }
                  });
              },
                minLength: 3
            });

我已经对我的问题做了一个jsfiddle。

链接到我的jsfiddle

问题是，当使用鼠标悬停在列表上时，我得到了我想要的背景悬停颜色。但是，当我使用箭头键导航时，jquery ui 默认主题颜色生效。这将创建两组背景颜色，一组使用鼠标，另一组使用箭头键。我尝试过使用

.ui-menu-item .ui-menu-item-wrapper:focus 

但没有成功。我正在使用 jquery ui 1.12.1 和 jquery 1.10.2。如何在这两个事件中获得我想要的背景颜色和文本颜色？

提前致谢。

我正在使用jQuery-ui 自动完成版本 v1.12.1。如何添加加载 GIF？我正在尝试仅使用 jQuery 检索数据...没有 AJAX 调用。

    jQuery(document).ready(function(){
    var product_data = <?php echo $product_implode; ?>;
        if(product_data != ''){
            jQuery( "#search_box" ).autocomplete({
                appendTo: "#project-description",
                minLength: 1,
                source: product_data,
                open: function(e, ui) {
                    jQuery('#project-description').addClass('autocomplete-content');
                },
                close: function(e, ui){
                    jQuery('#project-description').removeClass('autocomplete-content');
                }
            });
        }
    });

这是我的自动完成代码。我正在使用数据表版本 1.10.16来显示数据。我想显示加载程序图像，直到不显示搜索数据。

以下作品:

$("#txtAllowSearch").autocomplete(
    { source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }
);

但以下不起作用:

var $local_source = '["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]';

$("#txtAllowSearch").autocomplete(
    { source: $local_source }
);

我不熟悉数组.

我有一个jquery自动完成ui元素,显示了一个火车站列表.当用户从自动完成列表中选择一个工作站时,该功能应该从数据库中返回一组纬度/坐标,并在这些坐标上重新定位地图？

有人在这段代码中发现我的代码错了吗？

// make a json request to get the map data from the Map action
$(function() {         
    $.getJSON("/Home/Map", initialise);
});

var infowindow = new google.maps.InfoWindow({content: "EMPTY"});




function initialise(mapData) {

var latlng = new google.maps.LatLng(54.466667, -3.233333);

var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControlOptions: {

        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    },
    scaleControl: true,
    streetViewControl: false

};


var map = new google.maps.Map($("#map")[0],
myOptions);


   $.each(mapData, function (i, location) {
       setupLocationMarker(map, location);
   });

//Autocomplete 
 $(function () {
        $("#tags").autocomplete({
            source: "/Home/StationsList",
            minLength: 2,
            select: …