Question

我正在试图弄清楚如何将焦点放在这些对象上，以便在不需要时自动完成消失。

我会发布代码，然后解释我尝试过的内容。写得太多的唯一问题是它让一些人害怕，所以我会简短而彻底！

这是我正在使用的库http://complete-ly.appspot.com/

JQuery

var autocontainer = link.siblings（'。food-input-div'）; autocontainer.show（）; link.hide（）;

       var autoobj = completely(autocontainer[0]);
       autoobj.options = ['chicken', 'cheese', 'chobani', 'chocolate', 'chum', 'cherries', 'coka-cola', 'coconut', 'crack', 'cocain', 'creme brule'];
       autoobj.repaint();

       autoobj.input.focus();

       var wrapper = $(autoobj.wrapper);

       console.log(wrapper);
       console.log(document.activeElement);

       wrapper.attr("tabindex", "0");
       wrapper.focusout(function() {
           autocontainer.hide();
           link.show();
           this.remove();
       });

DOM

      <td class="left">
        <a class="add-food-link">+ Add food</a>
        <div class="food-input-div" style="display:none;"></div>
      </td>

Complete.ly直接在'food-input-div'元素

中添加与此类似的代码

    <div>
    <div>
    <input>
    <input>
    <div>
    <div>list item</div>
    <div>list item</div>
    <div>list item</div>
    <div>list item</div>
    </div>
    </div>
    </div>

我的Jquery给出了完全代码的第一个'wrapper'元素，tabindex为0，这样它就可以有一个焦点。

问题在于：

点击链接时： *链接已删除 *完全框呈现 *完全包装输入具有焦点

点击下拉列表中的项目时： *删除所有内容并呈现链接

我不明白为什么会发生这种情况，因为focusout被绑定到那些单独元素的父元素。

我玩弄了这个假设，即儿童元素在这里获得焦点并发现它是错误的。 http://jsfiddle.net/adiakritos/nU988/

所以现在我需要得到它，以便只有当点击“food-input-div”之外的任何元素时，才会删除所述元素及其子元素，并重新显示该链接。

我该怎么做？

现在玩这个：

Use jQuery to hide a DIV when the user clicks outside of it

这是我现在工作得很好的代码。除了我仍然无法点击列表项。

       $(document).mouseup(function (e){

         if (!wrapper.is(e.target) && wrapper.has(e.target).length === 0){

           autocontainer.hide();
           link.show();
           autoobj.wrapper.remove();
           console.log(e);

         };
       });

现在，当我点击下拉菜单时，e.target会直接返回我点击的div下面的元素。

因此，如果我点击“cheese”并且h4元素是其下的布局的一部分，e.target将返回h4而不是下拉div列表项。

实施Dropped.On.Caprica的代码

    var showFoodSearch = function(link) {
       var autocontainer = link.siblings('.food-input-div');
       autocontainer.show();
       link.hide();

       var autoobj = completely(autocontainer[0]);
       autoobj.options = ['chicken', 'cheese', 'chobani', 'chocolate', 'chum', 'cherries', 'coka-cola', 'coconut', 'crack', 'cocain', 'creme brule'];
       autoobj.repaint();
       autoobj.input.focus();

       var wrapper = $(autoobj.wrapper);

        wrapper.on('blur', 'input', function(){

           autocontainer.hide();
           link.show();
           autoobj.wrapper.remove();
           $(document).mouseup(function(e){
                console.log(e.target);
           });

        });

    };

与上述相同的确切行为尝试。

Answer 1

这就是我让JS完全按照我想要的方式工作的方式：

       var autocontainer = link.siblings('.autocomplete');
       autocontainer.show();
       link.hide();

       var autoobj = completely(autocontainer[0]);
       autoobj.options = ['chicken', 'cheese', 'chobani', 'chocolate', 'chum', 'cherries', 'coka-cola', 'coconut', 'crack', 'cocain', 'creme brule'];
       autoobj.repaint();
       autoobj.input.focus();

       var wrapper = $(autoobj.wrapper);

       $(document).click(function() {
           var focus = document.activeElement;
           if ( focus === document.body ) {
               autocontainer.hide();
               link.show();
               autoobj.wrapper.remove();
           }
       });

$（文档）.click（function（）{部分检查主要doc元素的任何点击...然后它确定焦点是什么......如果它在身体上（用户所在的位置）通常点击关闭某些东西）它会隐藏下拉。

使用自动完成功能进行聚焦

1 个答案: