自动输入聚焦元素jQuery ui(自动完成)

时间:2016-05-20 12:02:46

标签: javascript jquery user-interface autocomplete

我使用jQuery UI根据SQL数据库提供自动完成建议。这非常有效,但我希望(就像谷歌一样)使用当前选中/聚焦(li)元素自动填充输入。

input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test"  method="GET" autofocus>

    $(function() {
        $( '#titles' ).autocomplete({
            source: 'includes/search.php',
            minLength: 3,
            open: function(event, ui) {
                $('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
                $(window).resize(function() {
                    $(".ui-autocomplete").css('display', 'none');
    });
            }


        });
    })

1 个答案:

答案 0 :(得分:0)

您可以在focus上使用autocomplete事件。

我嘲笑了下面的source

$(function() {
  $('#titles').autocomplete({
    source: ['aaaa', 'bbbb'], // replace this with your AJAX call
    minLength: 3,

    select: function(event, ui) {
      $("#titles").val(ui.value)
    },

    focus: function(event, ui) {
      console.log(ui)
      $("#titles").val(ui.value)
    }


  });
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test" method="GET" autofocus>