Как я могу заставить мою сетку появляться из текстового поля

Question

У меня есть сетка кнопок в моем коде, где пользователь нажимает на слово «нажмите здесь», и сетка кнопок будет отображаться. Это использует jquery, я хочу знать, знает ли кто-нибудь способ, с помощью которого пользователь может щелкнуть текстовое поле, и происходит то, что появляется сетка кнопок, и если пользователь нажимает кнопку или удаляется от сетки Сетка снова исчезнет. Другими словами, я хочу, чтобы он работал точно так, как работает Jickery datepicker (чтобы увидеть jquery datepciker, пожалуйста, нажмите здесь

Чтобы увидеть мой код, который находится в jsfiddle, нажмите здесь

Answer 1

Попробуйте:

ОБНОВЛЕНО

$('#showGrid').click(function(e) {
    if ($('#gridone').css("display") == "table") {
        $('#gridone').hide();
    }
    else {
        $('#gridone').css("display", "table");
    }
    e.stopPropagation();
});

$("body").click(function() {
    $('#gridone').hide();   
});

$('#gridone  input').click(function(){
    $('.box INPUT').val($('.box INPUT').val() + $(this).val() );
    $('#gridone').hide();
});

Пример скрипта