标签: jquery-autocomplete

使用jquery自动完成功能,我有一个隐藏的输入字段来存储ID,因为名称会输入到select上的自动完成字段中.

像这样:

        $("#Clients").result(function (event, data, formatted) {
            if (data) {
                $("#ClientID").val(data["client_ClientNumber"]);
                if (data["ClientName"] && data["client_address1"] && data["client_postcode"] && data["client_postname"]) {
                    $("#ClientDetails").html(
                    "<li class=\"clientNumber\">Client ID: " + data["client_ClientNumber"] + "</li>" +
                    "<li>" + data["ClientName"] + "</li>" +
                    "<li>" + data["client_address1"] + "</li>" +
                    "<li>" + data["client_postcode"] + data["client_postname"] + "</li>"
                    );
                }
}

这是我的HTML:

    <div id="ClientSelectionPlaceholder">
        <h3>Client</h3>
        <%=Html.TextBox("Clients", null, new { @class = "clientsDropDown" })%>
        <%=Html.Hidden("ClientID", null, new { disabled = true}) %>
    </div>

问题是这个隐藏的ClientID字段没有回发,也没有使用jquery.serialize()进行序列化.它总是缺失.但据我所知,我的代码看起来很好.

我正在使用jQuery 1.8-UI中的新自动完成功能.我提供了以下格式的数据

["val1", "val2", "val3"]

这来自存储过程但输出为字符串.但是,由于某种原因,如果我使用javascript变量提供相同的数据,这根本不起作用

var data = ["val1", "val2", "val3"];

然后这很好.

<script type="text/javascript">
  $(function()
    $("#txtClient").autocomplete({
      source: "/intranet/common/scripts/IntranetLists.aspx?ListType=C"
    });
  });
</script>

我有一个页面,使用查询字符串提供我想要的任何数据.这是暂时的,但是当我以前使用过bassism的自动完成功能时它会起作用.

有任何想法吗？

编辑

源只是在单独的行上输出一个条目.现在输出使用JSON格式.我不明白的是输入如何将数据作为查询提供给数据源.正如我说的,我用一个脚本应该被调用每次我进入一个新的关键时期.

这是我得到的代码(考虑到这与第三方自动完成插件一起工作正常)

<%
  Dim MyCmd As New dbExact("proc_Intranet_Lists")
  MyCmd.cmd.Parameters("@List").Value = Request.QueryString("ListType")
  If Request.QueryString("Top") <> Nothing Then
    MyCmd.cmd.Parameters("@Top").Value = Request.QueryString("Top")
  End If
  MyCmd.cmd.Parameters("@Code").Value = Request.QueryString("term")
  MyCmd.cmd.Connection.Open()

  Dim results As New StringBuilder()
  results.Append("[")
  Dim dr As SqlDataReader = MyCmd.cmd.ExecuteReader
  If dr.HasRows Then
    While dr.Read
      results.AppendLine("'" + dr(0).ToString() + "',")
    End While
  Else
    results.Append("None …

我正在使用google places和jquery来实现一旦用户开始输入输入字段的目标,它会调用google地点并在下拉列表中输入结果(通过jquery ui autocomplete)

我的问题是,在我的自动完成功能中

source: function( request, response ) {
initialize()
}

在那里,我试图调用这个函数

function initialize() {
service.search(request, callback);
}

哪个工作正常...但问题是...初始化调用函数callback()...所以我不知道如何监听回调何时完成.

那么,例如,我将在这里做什么:

source: function( request, response ) {
// need code here to know when initialize and callback are done and are sending me the list of results from google ?
}

在我使用结果中的$ .map生成下拉列表之前,我只是不确定如何等待Google地方完成.

我正在尝试创建一个自动完成小部件,它将显示匹配项的名称和简短描述.

例如,如果我输入"美",它会显示"北地区 -美洲的北部次大陆." 和" 南美洲 - 美洲南部次大陆".

我已成功完成,所以我的数据库将返回相应的JSON响应,其中包含id,value(项目名称,例如北美和desc(简短说明,例如"北部次大陆......"),我只需要帮助将返回的结果格式化为

<li><strong>value<strong><br><p>desc</p></li> 

而不仅仅是

<li>value</li>

非常感谢提前.

PS我一直试图在Stack Overflow上寻找答案,但我发现的答案涉及formatResult和其他不再支持的方法.

我使用维基百科的API有一个简单的维基百科自动完成.

目前它正在使用jQuery自动完成插件,我想使用jQuery UI.

有人可以指导我吗？

这是使用插件的工作演示的小提琴:http: //jsfiddle.net/VjLnv/

这是JS:

function attachWikiAutoComplete(expression) {
    $("#artist").autocomplete("http://en.wikipedia.org/w/api.php",  {
        dataType: "jsonp", 
        parse: function(data) { 
            var rows = new Array(); 
            var matches = data[1];
            for( var i = 0; i < matches.length; i++){ 
                rows[i] = { data:matches[i], value:matches[i], result:matches[i] }; 
            } 
            return rows;
        },
        formatItem: function(row) { return row; }, 
        extraParams: {
            action: "opensearch", 
            format: "json", 
            search: function () { return $("#artist").val() } }, 
        max: 10 
    });
}

非常感谢

我是新手,我遇到了ajax自动完成问题,我在Firebug中遇到此错误(在Firefox中):

g.nodeName未定义
c = f.valHooks [g.type] || f.valHooks [g.nodeName.toLowerCase()];
jquery .... min.js(linha 977)

在Chrome中:

未捕获的TypeError:无法调用未定义的方法'toLowerCase'jquery-1.7.2.min.js:977
f.fn.extend.val jquery-1.7.2.min.js:977
$ .autocomplete.source novo:77
a. widget._search jquery-ui-1.8.18.custom.min.js:127
a.widget.search jquery-ui-1.8.18.custom.min.js:127
(匿名函数)

有人可以帮助我,我使用jQuery 1.7.2分钟完成,我按照本教程http://www.jensbits.com/2011/08/24/using-jquery-autocomplete-when-remote-源JSON此结果未包含标签或-值字段/

我的json源代码返回上面的代码:

[{"id":"1","campo":"[1] Empresa Tal"},{"id":"2","campo":"[2] Outra Empresa Tal"},{"id":"3","campo":"[3] Mais Outra Empresa"}] 

我的javascript函数:

 $('#accadempresa').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: '/ajax.php?action=available&orm=cadempresa&campo=razsoc&valor=' + $(this).val(),
                dataType: "json",
                data: {term: request.term},
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            id: item.id,
                            campo: item.campo
                        };
                    }));
                }
            });
        },
        minLength: 2,
        select: function(event, ui) {
            alert('ae');
            //$('#state_id').val(ui.item.id); …

我目前的代码是使用jQuery 1.7.x. 我想升级到jQuery 1.8,但我遇到了自动完成功能的问题.我用相同的代码创建了2个jsfiddles.在一个示例中,它可以正常工作,而另一个例子则不然.主要问题是当您搜索并单击时,应显示警告框并说明所点击的内容.它适用于旧的jQuery,但不适用于1.8.

这是工作,1.7版本 - http://jsfiddle.net/u2GEe/1/

这是破碎的1.8版本 - http://jsfiddle.net/TPWXh/3/

这是代码:

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function(ul, items) {
        var self = this,
            currentCategory = "";
        $.each(items, function(index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category search-dropdown-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            self._renderItem(ul, item);
        });
    }
});
$(document).ready(function() {
var data = [
    {
    label: "anders",
    category: "aa"},
{
    label: "andreas",
    category: "aa"},
{
    label: "antal",
    category: "aa"},
{
    label: "annhhx10",
    category: "Products"},
{
    label: "annk K12", …

我正在使用自动完成功能来获取一小组值.我希望当用户专注于输入框(使用键盘或鼠标)而不是等待他们输入时,立即显示"自动完成"源值.

如何在焦点处立即显示源值？

谢谢,

        $("#cityInput").autocomplete({
            minLength: 0, // With not that many cities, require at no characters before showing autocomplete
            source: getJson(),
            // plug-in to the select event in order to keep KnockOut informed about the 
        });

我在一个输入字段上使用自动完成功能来填充另一个输入字段:

<input id='fruit' name='fruit' type='text'>
<input id='details' name='details' type='text'>

jQuery代码:

var x = ["apple", "kiwi", "lemon"];

$( "#fruit" ).autocomplete({
     source: x
});

jQuery(document).on("change","#fruit", function()
{
    $.each(x, function(key, value) {

        switch(value) {
            case "apple":
                $('#details').val("Delicious");
                break;
            case "kiwi":
                $('#details').val("Yummy");
                break;
            case "lemon":
                $('#details').val("Sour");

        }
    });
}); 

当有人用自动完成选择苹果,猕猴桃或柠檬时,它会用相应的文本填写另一个输入字段.

我有两个问题:

1. 目前它总是印出"酸"
2. 从自动填充中选择条目时,您必须再次单击以填写该字段.当有人从自动填充中选择一个选项时,有没有办法做到这一点？

这是一个小提琴

我正在使用带有Braincrafted Bootstrap捆绑包的Symfony 2.4.我一直在寻找一种在Bootstrap中使用自动填充文本框的方法,但看起来我需要一个外部库来执行此操作("Typeahead"？).

首先,使用Bootstrap本身是否真的无法做到这一点？其次,除了Typeahead之外还有其他推荐的替代方案吗？

谢谢