标签: jquery-autocomplete

在我的 web 应用程序中，我在网页顶部的固定工具栏中有一个搜索框。我像这样实现了工具栏的固定位置....

#toolbar {
        position: fixed !important; 
        position: absolute;
        height: 25px;
        width: 100%;
        top: 0px;
        left: 0px;
        margin: 0;
        z-index: 100;
        font-size: 12px;
    }

现在，我正在使用jQuery 插件在其上实现关键字自动完成功能。

我的问题是如何在滚动/调整窗口大小时将自动完成建议固定/附加到搜索框。

自动完成建议框的 css 是....

element.style {
   display:none;
   left:166px;
   position:absolute;
   top:96px;
   width:130px;
}
.ac_results {
   background-color:white;
   border:1px solid #C5DBEC;
   overflow:hidden;
   padding:0;
   z-index:99999;
}

我在执行这些操作时遇到了问题..

1. 在搜索框中输入内容，显示建议
2. 打开搜索框后，我滚动窗口。
3. 这会导致自动建议框也滚动。

我能做些什么来解决这个错误？

这是它的外观。

自动完成已在固定位置的输入框上滚动。

更新1：我尝试添加position: fixed;到自动完成。

这在不同的情况下会产生问题。

• 在搜索框中输入内容，显示建议
• 按退出键，导致盒子消失
• 向下滚动窗口
• 在搜索框中输入内容，显示建议
• 现在搜索框出现在滚动前出现的位置，因为位置是固定的

更新：

更新2：

添加到自动完成 css 的以下代码可以解决问题。

.ac_results {
       background-color:white;
       border:1px …

我尝试在文本字段上使用 jquery 自动完成功能，以允许用户选择多个标签，如本例所示，但出现错误Uncaught TypeError: Cannot read property 'autocomplete' of undefined。这是导致问题的代码，大部分是从链接复制的。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
var tags = [<?php
foreach($this->tags as $tag){
    echo "\"{$tag['name']}\",";
}
?>""];

$( "textarea:[name='tags']" ).autocomplete({
    minLength: 0,
    source: function( request, response ) {
        // delegate back to autocomplete, but extract the last term
        alert($.ui);
        $.noConflict();
        alert($.ui);
        response( $.ui.autocomplete.filter(
            tags, extractLast( request.term ) ) );
    },
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    select: function( …

我有这个功能,根据用户输入的地址返回bing地址建议.我已经指定了userLocation,但结果并不像我想象的那样准确.我还有什么额外的事吗？如果必须,我可以手动指定州或邮政编码,但我宁愿避免进行后期处理.

例如,键入111将返回111,NY,111 Sweden,111 Denmark的结果.我想将此限制为仅限于美国,并且仅限于几个我可以硬编码的状态.当我在数据中手动指定postalCode的选项时,它会覆盖我在查询中使用的内容.

    var geolocate = function(options) {
    $.ajax({
        url: "http://dev.virtualearth.net/REST/v1/Locations",
        dataType: "jsonp",
        data: {
            key: "KEY",
            q: options.address,
            userLocation: options.latitude + ',' + options.longitude,
            maxResults: options.maxResults,
        },
        jsonp: "jsonp",
        success: function(data) {
            if (options.success instanceof Function) {
                options.success(data);
            }
        },
        error: function(xhr, status, text) {
            alert('ERROR:\n');
        }
    });
};

现在它看起来像这样

我正在jquery自动完成下面是我的代码,我想搜索城市.

jQuery('#citySearch').autocomplete({
        serviceUrl: basePath + '/selectMycities.json',
        paramName: "tagName", // 
        onSelect: function(suggestion) {
            cityID = suggestion.data;
            cityId=cityID;
            jQuery("#cityId").val(cityID);
            return false;
        },
        transformResult: function(response) {

            return {

                suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
                    return {
                        value: item.cityName,
                        data: item.cityId,
                        id: item.cityId
                    };

                })
            };
        }
    });

现在在上面的自动完成中我想将autoFocus设置为true但它不起作用.请帮忙.

它应该像第二张图像

我使用了组合框演示中的一些代码，现在我正在尝试向列表项添加一些类，_renderItem 和 _renderMenu 没有任何效果。

代码（带有一些不相关的行，以确保我不会错过任何内容）

this.input = $("<input>")
    .appendTo(this.wrapper)
    .val(value)
    .attr("title", "")
    .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
    .autocomplete({
        autoFocus: true,
        response: function (event, ui) {
            if (ui.content.length == 0) {
                    ui.content.push({
                        label: "new value: " + $(this).val(),
                        value: $(this).val(),
                        id: 0
                    });
            }
        },
        _renderItem: function (ul, item) {
            return $("<li>")
                .addClass("Please work")
                .attr("data-value", item.value)
                .append(item.label)
                .appendTo(ul);
        },
        _renderMenu: function (ul, items) {
            var that = this;
            $.each(items, function (index, item) {
                that._renderItemData(ul, item);
            });
            $(ul).find("li:odd").addClass("odd");
        },
        delay: 0,
        minLength: …

我正在使用JQuery JQueryUI的AutoComplete代码.它转到我提供的网址(找到答案),但?term=<search query>在网址后面添加.

我正在尝试获取以下网址...

/myurl/<term / search query>

例如.

/myurl/abcd
/myurl/hello+world

等等...

是否有可能做到这一点？

否则,有可能重命名查询参数term到别的东西,..喜欢query来q等？

我想知道是否有一种方法来计算在文本框中键入内容时显示的结果数.计算li元素的工作,但我敢打赌,这是一种更聪明的方式.谢谢

到目前为止,我有以下内容

var aCleanData = ['aaa','aab','faa','fff','ffb','fgh','mmm','maa'];

$('#my-input').autocomplete({
    source:aCleanData,
    minLength:2
});

目前,如果您输入aa,aaa,aab,faa,maa将显示.

我想要做的是当用户键入显示ff的数据时将是fff,ffb数据.

基本上,只有键入的内容应该从第一个字符开始匹配.

这应该是递归的.当用户输入时fg,fff,ffb应该消失并且只fgh应出现.

在此先感谢您的帮助.

更新:

ps看看我的意思:

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

输入sc并且您将看到的不仅仅是以sc开头的数据.

我需要帮助,我看不出问题出在哪里.

当我在html文件中设置自动完成源时,它工作正常,当我在ajax.php中打印出相同的源或数据库值并通过ajax返回它时它不起作用.可能是什么问题呢？请帮忙.

Html:

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Auto complete</title>
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
        <link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.custom.css" />
        <style type="text/css">
            .ui-autocomplete-loading {
                background: url("images/loader.gif") no-repeat scroll right center white;
            }
        </style>
        <script type="text/javascript">
            jQuery(document).ready(function($){                       
                $("#ac").autocomplete({
                    minLength: 2,
                    //source: [{"value":"Some Name","id":1},{"value":"Some Othername","id":2}]
                    source: function( request, response){
                        $.ajax({
                            type: 'GET',
                            url: 'ajax.php',
                            data: {
                                'term':request.term
                            },
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function(data){
                                console.log('Success : ' + data);
                            },
                            error: function(message){
                                alert(message);
                            }
                        });
                    }, …

我想下载jquery autocomplete插件,但它不允许我只下载该文件,但使用jquery核心,jquery位置,小部件等脚本.但是我不想要所有这些文件,因为我已经将它们添加到我的项目中并且工作正常,所以我不想打破任何当前的工作逻辑.

当我尝试将所有脚本附带自动完成(包括core.js)时,它工作但我的datepicker停止工作.

我也尝试从完整脚本中选择并添加自动完成脚本部分,但它不起作用,可能是因为我使用的是jquery 1.7.2,我发现了自动完成1.10.2.

有没有办法只获得自动完成插件或任何类似的插件,可以像我们得到外部作者的其他插件？

基本上我的要求并不完全是自动完成,我想要的是有一个焦点的文本框显示选择的选项列表,类似下拉列表选项,但也让我们放置自己的值,不显示下拉列表箭头.我在自动完成插件的帮助下完成了这一切,当我尝试在我的项目中添加它时出现问题.

基本上这个要求

知道我能做什么吗？