标签: jquery-autocomplete

我正在使用jQuery UI AutoComplete控件(刚刚更新到jQuery UI 1.8.1).每当用户离开文本框时,我想将文本框的内容设置为已知良好值,并为所选值设置隐藏ID字段.此外,我希望页面在文本框的内容更改时回发.

目前,我通过让自动完成选择事件设置隐藏ID然后在文本框上设置文本框值的更改事件来实现此功能,并在必要时导致回发.

如果用户只使用键盘,这将完美地工作.您可以键入,使用向上和向下箭头选择值,然后使用Tab键退出.触发select事件,设置id,然后触发change事件并返回页面.

如果用户开始输入,然后使用鼠标虽然从自动完成选项挑,改变事件触发(如重点转移到自动完成菜单？)和页面回之前选择事件有机会来设置ID.

有没有办法让更改事件在select事件之后才会触发,即使使用鼠标也是如此？

$(function() {
    var txtAutoComp_cache = {};
    var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() };
    $('#txtAutoComp').change(function() {
        if (this.value == '') { txtAutoComp_current = null; }
        if (txtAutoComp_current) {
            this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current;
            $('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current);
        } else {
            this.value = '';
            $('#hiddenAutoComp_ID').val('');
        }
        // Postback goes here
    });
    $('#txtAutoComp').autocomplete({
        source: function(request, response) {
            var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') …

我正在尝试使用jQuery UI自动完成实现缓存.我正在使用jQuery 1.4.4和UI 1.8.6

这是我工作的基本代码:

$('#searchbox').autocomplete({
    source: function(request, response) {
            if (xhr === lastXhr) {
                response( $.map(data, function(item) {
                    return {
                        label: item.NAME + (item.PRFNM ? ' (' + item.PRFNM + ')' : '') + ', ' + item.JOBTITLE,
                        value: item.NAME
                    };
                }));
            } 
        });
    }
});

这是我尝试通过查看示例来实现缓存:

var cache = {},
    lastXhr;
$('#searchbox').autocomplete({
    source: function(request, response) {
        var term = request.term;
        if (term in cache) {
            response($.map(cache[term], function(item) {
                return {
                    label: item.NAME + (item.PRFNM ? ' (' + …

我在输入框上有jQuery自动完成设置.

它工作正常.

但是,我希望有一个按钮,单击该按钮将触发自动完成,就像用户在输入中键入一些文本一样.我会传递一个特定的字符串.

有关如何做到这一点的任何想法？

我试图在搜索字段中使用jquery-ui进行自动完成.因为搜索取决于另一个表单字段的值,所以我正在使用源代码的回调.我可以看到请求已正确发送.我的远程脚本返回一个简单的字符串数组,此时我无法使其工作.永远不会构建下拉列表.谁能告诉我为什么？这是代码:

    $(document).ready(function(){
    $("#species").autocomplete({
      source: function( request, response ) {
        $.ajax({
          url: "/includes/species-ajax.cfm",
          dataType: "jsonp",
          data: {
            term: request.term,
            searchBy : function() { 
              var sb = $("#searchBy_hidden").val();
              return (sb ? sb : 'common_name'); }
          },
          success: function( data ) {
            response( $.map( data, function( item ) {
              return {
                label: item.name,
                value: item.name
              }
            }));
          }
         });
    }});
  });

<input type="hidden" name="searchBy_hidden" id="searchBy_hidden" value="common_name" />
Enter the name of a species: <input type="textbox" size="30" id="species" />

谢谢,

我正试图在django应用程序中使用jquery ui自动填充搜索一些项目.我看过这个问题,我就像自动完成文档一样关注.我对插件或其他东西不感兴趣.我懂了.

在views.py中:

def search_view(request):
    q = request.GET['term']
    ret = []
    listado = Model.objects.filter(descripcion__istartswith=q).order_by("descripcion")
    for l in listado:
        ret.append({'label':l.descripcion, 'value':l.id})
    return HttpResponse(simplejson.dumps(ret), mimetype='application/json')

在我的模板中,我有类似的东西

js:

$("#auto_material").autocomplete({
                source:'{% url search_view %}',
                minLength: 2,
                select: function( event, ui ) {
                    $("#auto_material").val(ui.item.label);
                    $("#id_material").val(ui.item.value);
                }

            });

html:

<input type="text" id="auto_material" name="material" class="campo" style="width:99%;"/>
<input type="hidden" id="id_material" />

搜索项目中的所有内容都可以正常工作,但是当我尝试使用ui.item.label设置文本输入值时,它会继续将ui.item.value放在文本输入上,而不是标签上.

任何的想法？自动完成对象上的"select"事件是否可以覆盖？任何的想法？

提前致谢.

我正在尝试设置自动填充字段.

我读了JQuery UI文档,但是所有的例子都假设源是一个静态的项目列表,JQuery将从中选择匹配的条目(我的意思是静态=列表是完整的,不依赖于用户键入的内容).

以下是"远程数据源"示例中的代码:

$( "#birds" ).autocomplete({
    source: "search.php",
    ...

我希望JQuery调用search.php?query=mytext(此URL返回匹配项的列表),因为我需要使用PHP在数据库中查找建议.

有没有办法做到这一点？也许我不懂文档？

我一直使用jquery自动完成一段时间没有问题,直到现在.我想创建一个标记系统(例如stackoverflow中的标记系统).

为此,我使用两个插件:

• Jquery UI(http://jqueryui.com/demos/autocomplete/)
• Xoxco(http://xoxco.com/projects/code/tagsinput/)

我让它运行并使用此代码工作:

$('#related_tags').tagsInput({
    autocomplete_url : 'live_search.php',
    autocomplete : {
            minLength: 3,
            delay: 150,
            //DATA AS OPTION??
    },
   'height':'30px',
   'width':'auto',
   'removeWithBackspace' : true,
   'minChars' : 3,
   'maxChars' : 200,
   'placeholderColor' : '#666666'
});

但是,我需要更改livesearch显示找到的数据的方式(这样它不仅显示标签).如果你没有将这两个插件一起使用(比如你只是使用自动完成),这很容易,你只需要这样做:

$( "#related_tags" ).autocomplete({
        source: 'live_search.php',
        minLength: 3,
        delay: 150
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + …

我希望为用户提供添加自己的变体的可能性,而不仅仅是建议的变体.但是当我在字段中键入内容并单击ENTER时,我的表单会提交.

然后我尝试捕获我的字段的keydown事件,但在这种情况下,我没有可能从使用箭头的建议中选择变体并输入键,因为ui参数未定义.

    $('#field_id').on('keydown', function(event) {
        if (event.keyCode == $.ui.keyCode.ENTER
            || event.keyCode == $.ui.keyCode.NUMPAD_ENTER)
        {

            $('#field_id').trigger('autocompleteselect');
        }
    });

    $('#field_id').autocomplete({
        source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}]
        minLength: 0
    }).on('autocompleteselect', function(event, ui) {
        // if I click on suggestion using mouse - everything is ok
        // but not for ENTER-key choosing

        // I want something like that:
        if (ui.item) {
              id = ui.item.id;
              value = ui.item.value;
        } else {
              id = 'my_new_item';
              value = $(this).val();
        }
        return …

我试图autocomplete在ASP MVC 3网页上使用jQuery 功能.不幸的是我一直收到这个错误.我查看了我正在使用的1.9.2版,它确实有自动完成方法.但是,我对jQuery完全不熟悉,并且不确定标头中是否有太多声明,冲突的库或缺少的库.

以下是视图中的代码

<link href="../../Content/jquery-ui-1.9.2.custom.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.js"></script>
<script type="text/javascript">

    $(document).ready( function() {
      $('#BankName').autocomplete('@Url.Action("GetBanks", "AgentTransmission")', {
          dataType: 'json',
          parse: function(data) {
              var rows = new Array();
              for(var i=0; i<data.length; i++){
                  rows[i] = { data:data[i], value:data[i].SignalName, result:data[i].SignalName };
              }
              return rows;
          },
          formatItem: function(row, i, n) {
              return row.SignalName + ' - ' + row.Description;
          },
          width: 300, …

我正在使用DevBridge jQuery自动完成,这工作正常,但我想强制用户从下拉列表中选择一个选项.

有没有办法做到这一点？

var airports = [
    { value: 'Manchester (MAN)' },
    { value: 'Bangkok (BKK)' }, 
    { value: 'New York (JFK)' }
];

$('#autocomplete').autocomplete({
    lookup: airports
});