标签: jquery-autocomplete

我正在尝试实现jquery自动完成插件.我已经启动并运行了,但有些东西不能正常工作.

基本上我有一个自动完成的员工名单.该列表是使用VB.NET处理程序(.ashx文件)从sql-database(employee_names和employee_ID)中的表生成的.数据格式为:employee_name-employee_ID.到目前为止,所有员工都在自动填充中列出.

问题是,我不知道如何将用户重定向到某个页面(例如employee_profile.aspx)时,他们选择了从自动完成的员工.

这是我的重定向代码,但它不能正常工作:

$('#fname2').result(function(event, data, formatted) {
        location.href = "employee_profile.aspx?id=" + data
});

例如; 用户选择它会将用户重定向到employee_profile.aspx？id = employee的employee-id名称(例如:employee_profile.aspx？id = John Doe-91210)而不是employee_profile.aspx？id = 91210.

我知道我可以剥离employee_ID:

formatResult: function(data, value) {
   return value.split("-")[1];
   }   
});

但我不知道如何将employee_ID传递给重定向页面.

这是我的整个代码:

$().ready(function() {

        $("#fname2").autocomplete("AutocompleteData.ashx", {
            minChars: 3,
            selectFirst: false,
            formatItem: function(data, i, n, value) {
            return value.split("-")[0];
            },
            //Not used, just for splitting employee_ID
            //formatResult: function(data, value) {
            //   return value.split("-")[1];
            //}  
            });

            $('#fname2').result(function(event, data, formatted) {
            location.href = "employee_profile.aspx?id=" + data
            });

    });

我知道我很亲密,它应该是非常简单的东西,但任何人都可以帮助我吗？ …

我正在做jQuery自动完成.如果我把硬编码的JSON数组放入工作正常.但是当我从c#传递数组时它失败了.请帮助,我花了足够的时间与它,我被卡住了!

这是我在AutoComplete.aspx中的jQuery代码

<script type="text/javascript">
    $(document).ready(function () {
        var msgbox = $("#status");
        $.ajax({
            type: "POST",

            //Page Name (in which the method should be called) and method name
            url: "AutoControl.aspx/GetData",

            //else If you don't want to pass any value to server side function leave the data to blank line below
            data: "{}",

            contentType: "application/json; charset=utf-8",
            dataType: "json",

            success: function (msg) {
                $("#status").val(msg.d);
            }
        });

        $('#<%=tags.ClientID%>').autocomplete(["c++", "java", "php", "coldfusion"], {
            width: 320,
            max: 4,
            highlight: false,
            multiple: true,
            multipleSeparator: " ",
            scroll: true, …

简短版问题

当输入字符串与结果字符串匹配时，自动完成功能起作用，但在其他情况下不起作用。数据已成功从JSON中检索。

较长的版本

我想用JSON数据动态编辑自动完成的源内容。

当搜索字符串匹配first_name和last_name字段时，以下方法有效。

但是JSON网址返回的更多，例如，在搜索用户名时，它仍返回正确的数据。但这在自动完成功能中并未显示，我的理论是自动完成功能UI会强制“输入值”与“结果值”相同。

JSON数据返回：

[
        {"pk": 1012912, "fields": {"first_name": "Barack", "last_name": "Obama"}}, 
        {"pk": 1017519, "fields": {"first_name": "George", "last_name": "Bush"}}
]

自动完成代码

如您所见，结果集是由搜索功能设置的。

$('#search').autocomplete({
    source: [],
    search: function(event, ui){
        results = [];
        var json = jQuery.getJSON('http://jsondata.com?query='+event.target.value, function(data){
            for (var i=0; i<data.length; i++){
                results.push(data[i].fields.first_name + ' ' +data[i].fields.last_name); 
            };
        }).success(function(){
            $('#search').autocomplete('option', 'source', results);
            //The following debug proves that the 'results' are correct, even on search for usernames
            console.log(results);
        });
    },
});

如果在#search字段中搜索“ Barack Obama”，我会得到结果，没问题。但是，如果说巴拉克·奥巴马（Barack Obama）的用户名是“ baracko”，并且我搜索他的用户名，那么我会从JSON和结果数组（如我用console.log进行检查）中获得正确的结果，但未显示结果。

有人知道为什么吗？ …

在玩了一下jQuery的自动完成功能之后,我无法点击选择事件来点击.这很奇怪,因为当鼠标拖过列表中的每个元素时会触发onfocus事件.从我到目前为止所尝试的情况来看,看起来并没有内置的方法可以点击onclick选择事件.我错过了什么吗？或者,过去人们有另一种处理方式吗？

在此先感谢,布兰登

我已经获得了以下代码并稍微修改了原始示例页面:

http://jsfiddle.net/zK3Wc/21/

不知何故,如果你使用的向下箭头按钮,浏览清单,它显示在搜索字段中的值(数字),而不是标签,但该守则的规定,即在选择时,标签应设置为值.

我需要的是在搜索字段中显示标签而不是数字,但如果我点击一个项目,它在网址中有数字值,使用向下箭头按钮时相同.

拉莫

此处提供的jQuery UI自动完成多个示例允许您多次添加相同的项目.

我该如何防止这种情况发生？

我在这段代码中收到错误.有谁能够帮我？

<h4>search:<input type="text" id="name-list" /></h4>
<script type="text/javascript" language="javascript">
$(function () {
        $("#name-list")
    .autocomplete({
        source: function (request, response) {
                $.ajax({
                url: "/Home/Searchuser", type: "POST", dataType: "json",
                data: { searchText: request.term, maxResults: 10 }
            })

            return false;

        },

        minLength: 1

        }).data("autocomplete")._renderItem = function (ul, item) {
        var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.PicLocation + '"></div><div class="label">' + item.label + '</div><div class="description">' + item.DisplayName + '</div></div></a>';
                                 return $("<li></li>")
                                .data("item.autocomplete", item)
                                .append(inner_html)
                                .appendTo(ul);
    };

    });
</script>

数据正在从服务器正确接收.我哪里弄错了？

我正在尝试使用POST查询将文本字段连接到jQuery UI的自动完成与远程数据源.到目前为止我有这个:

$( "#booking_student" ).autocomplete({
            source: function( request, respond ) {
                $.post( "/path/to/my/api.php", { student: request.term },
                        function( response ) {
                            //do something
                        } );
            }
        });

使用Firebug我可以看到我的API返回了我期望的结果,但是没有出现自动完成下拉列表.将结果插入自动完成下拉列表我需要做什么？我是否需要使用JSON结果填充// do something部分中的变量？

我将复杂的JSON数据传递给 jQuery自动完成插件.它工作正常,因此它显示了列表Products.

现在我想得到Price已经包含在JSON数据中的某种方式,当我从autocomlete列表中选择产品时,我想填充input标记Price.

如果有可能,我真的无法得到.我所知道的数据已经是JSON但是如何获得它？

任何线索？

这是JS for jQuery autocomplete插件

 function CreateAutocomplete() {

        var inputsToProcess = $('[data-autocomplete]').each(function (index, element) {
            var requestUrl = $(element).attr('data-action');

            $(element).autocomplete({
                minLength: 1,
                source: function (request, response) {
                    $.ajax({
                        url: requestUrl,
                        dataType: "json",
                        data: { query: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    label: item.Name,
                                    value: item.Name,
                                    realValue: item.UID                                   
                                };
                            }));
                        },
                    });
                },
                select: function (event, ui) { …

我试图尝试使用jQuery自动完成功能为输入框使用不同的数据源选项.

我有id #polysearch的输入框.我想自动完成焦点上的输入框(只是放光标)和源选项'data1',我想在键入2个字符时自动填充带有源选项'data2'的输入框.请帮忙!

谢谢!