JQuery

Question

Я получил следующий код:

function testSearch() { 
    $(".searchfield").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "{{ path('my_search') }}", 
       dataType: "json", 
       data: { 
        term: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.label, 
          value: item.value 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 1, 
     select: function (event, ui) { 
      $.each(ui, function (key, value) { 
       window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value 

      }); 
     }, 
     focus: function (event, ui) { 
      /* $.each(ui, function(key, value) { 
       alert(key + " " + value); 
      });*/ 
     }, 
    }) 
    $.ui.autocomplete.prototype._renderItem = function (ul, item) { 
     var a = $('<a>', { 
      href: "{{ path('my_show_product', {'productId': ''}) }}" + "/" + item.value, 
      text: item.label 
     }); 

     var $li = $('<li></li>', { 
      style: "width:100%" 
     }); 

     return $li.append(a).data('item.autocomplete', item.value).appendTo(ul); 
    }; 
} 

мои данные возвращается из функции, называемой функцией $.ajax выше, в этом формате JSON:

[ { label: 'test label', value: '1234' }, { label: 'test label1', value: '4567' } ] 

поле ввода выглядит следующим образом:

<input type="text" class="searchfield" name="searchfield" value="Search for Products" /> 

до сих пор, я могу искать предметы и получить Ресул ts в указанном выше формате, отображаемом на лицевой стороне в списке. Каждый пункт ссылается на страницу http://mydomain/products/(value)

В настоящее время возникает следующая проблема: если я что-то искал и появился список поиска, я могу перемещаться по моей клавиатуре через список, нажимать кнопку ввода и перенаправляться на надлежащей страницы, но полные метки каждого элемента, который я фокусирую, не отображаются в поле ввода, показанное выше.

Как я могу это достичь?

EDIT: поэтому я попытался изменить код к следующему:

function testSearch() { 
$(".searchfield").autocomplete({ 
source: function(request, response) { 
    $.ajax({ 
     url: "{{ path('my_search') }}", 
     dataType: "json", 
     data: { 
      term: request.term 
     }, 
     success: function(data) { 

      response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.value 
       } 
      })); 
     } 
    }); 
}, 
minLength: 1, 
select: function(event, ui) { 

    $.each(ui, function(key, value) { 
     window.location = "{{ path('my_show_product', {'productId': ''}) }}"+"/" + value 

     }); 
}, 

focus: function(event, ui){ 

    $('.ui-autocomplete-input').val(ui.item.label); 
      $(this).val(ui.item.label); 
    //alert($('#searchfield')[0].className); 
    //alert(ui.item.label); 
    //$(this).val($(ui.item).text()); 
// $('.searchfield').val($(this).val(ui.item.label)); 

    } 

}) 
$.ui.autocomplete.prototype._renderItem = function(ul, item) { 

var a = $('<a>', { 
    href: "{{ path('my_show_product', {'productId': ''}) }}"+"/" + item.value, 
    text: item.label 
}); 

var $li = $('<li></li>', {style:"width:100%"}); 

return $li.append(a).data('item.autocomplete', item).appendTo(ul); 

}; 

} 

но мне кажется, что ответ делает проблемы: если я оставить:

response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.value 
       } 
      })); 

чем текстовое поле получает «значения» каждой метки, это не то, что я хочу. если я изменить его на:

response($.map(data, function(item) { 
       return { 
        label: item.label, 
        value: item.label 
       } 
      })); 

я вижу надписи InThe поле ввода, но ссылка для каждого элемента в структуре http://mydomain/(label) и не http://mydomain/(value) .what я нужен последний один.

Любые идеи?

Answer 1

Потому что вы ничего не делаете в мероприятии focus.

Если вы хотите сделать что-то конкретное, то вы можете сделать это внутри focus событий иначе просто удалите его из опциона. По умолчанию плагин позаботится о том, чтобы установить выделенное значение в textbox, если вы не указали событие focus в параметрах.

$(".searchfield").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: "{{ path('my_search') }}", 
       dataType: "json", 
       data: { 
        term: request.term 
       }, 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
          label: item.label, 
          value: item.value 
         } 
        })); 
       } 
      }); 
     }, 
     minLength: 1, 
     select: function (event, ui) { 
      $.each(ui, function (key, value) { 
       window.location = "{{ path('my_show_product', {'productId': ''}) }}" + "/" + value 

      }); 
     } 
    })