0

I am trying to enable an old function made for desktop for mobile touch devices. Everything looks fine now, except the select part. The function will recognize the return key (13) and fill out a form field with the selected option.

It looks like all there is left to do, is to change this part:

else if (e.keyCode == 13) {

I was thinking about something like this, but it does not work:

$('#search-autocomplete li').click(function(e) { 
     console.log('worked');
 });

How can this be altered, so it will recognize also touch events?

This is the entire function:

//Auto-complete
$('#refn').keydown(function(e) {
    if (e.keyCode == 40 || e.keyCode == 38) {
        var current = $('#search-autocomplete .hover').parent();

        if (current.length == 0)
            $('#search-autocomplete li:first-child a').addClass('hover');
        else {
            current.find('a').removeClass('hover');

            if (e.keyCode == 40) current.next().find('a').addClass('hover'); //Arrow down
            else current.prev().find('a').addClass('hover'); //Arrow up
        }

        return false;
    }
    else if (e.keyCode == 13) {

        if ($('#search-autocomplete .hover').length > 0) {
            $('#refn').val($('#search-autocomplete .hover').data('ref'));
            $('#search-autocomplete').hide();
        }
        event.preventDefault();
        return false;
    }
}).bind('keyup change', function(e) {
    if ($(this).val().trim() == '' || $(this).data('autocompleted')) {
        $(this).data('autocompleted', false);
        return true;
    }
    // console.log($('#filter_brand').find(":selected").val());
    $.ajax({
        type: 'get',
        url: '/subapp_cities/index.php/getsuggestions',
        data: { 
                q: $('#refn').val() ,
                ref: 1,
                make: $('#filter_brand').find(":selected").val()
        },
        dataType: 'text',
        success: function(response) {
            response = eval('response = ' + response);

            var selectedSuggestion = $('#search-autocomplete .hover').text();

            $('#search-autocomplete').html('').show();

            for (var i = 0; i < response.length; ++i){
                var tag = response[i][1] + ' ' + response[i][0];
                $('<li><a href="" data-ref="'+response[i][0]+'" ' + (tag == selectedSuggestion ? 'class="hover"' : '') + '>'+tag+'</a></li>').appendTo('#search-autocomplete');
            }
        },
        error: function(request, status, error) {
            console.error(status);
            console.error(error);
        }
    });
});

Output:

enter image description here

merlin
  • 2,717
  • 3
  • 29
  • 59
  • I’m unable to look into this in detail right now, but can recommend looking at Hammer JS if you haven’t already, for managing touch inputs: https://hammerjs.github.io/ and https://hammerjs.github.io/jquery-plugin/ – Matt Saunders Apr 28 '19 at 20:38
  • Heres a ‘tap’ example you could try with some sample code: https://codepen.io/jtangelder/pen/pBuIw More complicated gestures are supported should you need them - it’s a useful toolkit. – Matt Saunders Apr 28 '19 at 20:40
  • Thank you. I have the impression that this might be "overkill". All I want to do is recognize the onclik event on li / a and if so fill in the selected value into the form field. Somehow the function .$('#search-autocomplete a').click(function(e) { does not work, while it should in my opinion. It does not fire at all. – merlin Apr 28 '19 at 20:48
  • I know what you mean, but something to look at if you don’t find another solution, and it is a good library. Another approach is consider is using a native html select, which would have good support across all browsers incl mobile. – Matt Saunders Apr 28 '19 at 20:51
  • I’ve found non-native inputs can cause more issues than they solve sometimes, esp on mobile - and they look a lot better than they used to :) – Matt Saunders Apr 28 '19 at 20:54
  • Might be relevant https://stackoverflow.com/a/10722890/2627160 – Matt Saunders Apr 28 '19 at 21:03
  • That is really a close example, thank you for the hint. In my case there might be something else the problem. I am creating the list via ajax. So onload the li elements are not present. What about putting somethin inline? I tried onclick="alert()" but on touch it just makes the box disapear. – merlin Apr 28 '19 at 21:24
  • 1
    Ah I’ve run into that issue before with click events on async elements - try using a delegate click event on the parent
      . Explanation here: https://learn.jquery.com/events/event-delegation/. Let me know if all this is helpful and I’ll do a proper answer! :)
     – Matt Saunders Apr 28 '19 at 21:29
  • You are right, just discovered it in the same time :-) Got it working now with $('#search-autocomplete').delegate('a', 'mouseenter', function() { ... thank you! – merlin Apr 28 '19 at 21:50

0 Answers0