Question

我有一个文本框，与写入隐藏容器的ID相匹配，并在按回车后淡入它们，一切都很好，除非我添加了一个按钮来执行相同的动作...我可以＆＃ 39;似乎让按钮工作。

HTML

<input type="text" value="Type the desired page" id="search"  class="txtfield"  onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}" autocomplete="off"/>
<input type="button" class="btn"/>

<div class="clear"></div>

<div id="content">
    <div id="home">home
        <br /><i>home content</i>
    </div>
    <div id="about">about
        <br /><i>about content</i>
    </div>
    <div id="portfolio">portfolio
        <br /><i>portfolio content</i>
    </div>
    <div id="hire">hire me
        <br /><i>hire me content</i>
    </div>
    <div id="contact">contact
        <br /><i>contact content</i>
    </div>
</div>

脚本

var substringMatcher = function (strs, q, cb) {
    return (function (q, cb, name) {
        var matches, substrRegex;
        // an array that will be populated with substring matches
        matches = [];
        // regex used to determine if a string contains the substring `q`
        substrRegex = new RegExp(q, 'i');
        // iterate through the pool of strings and for any string that
        // contains the substring `q`, add it to the `matches` array
        $.each(strs, function (i, str) {
            $("#search").val("");
            if (substrRegex.test(str) || q.slice(0, 1) === str.slice(0, 1)) {
                // the typeahead jQuery plugin expects suggestions to a
                // JavaScript object, refer to typeahead docs for more info        
                matches.push(name(str));
            }
        });
        cb(matches);
    }(q, cb, function (n) {
        return {
            "content": n
        }
    }));
};

var _matches = $.map($("#content div"), function (v, k) {
    return [v.id]
});

var template = {
    "content": _matches
};
var search = $('#search').val().toLowerCase();
$("#content div:gt(0)").hide(0);
$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13){
        substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content)
            .delay(500)
            .fadeIn(500)
            .siblings()
            .fadeOut(500);
            search.val("")
        })
    }
});

Answer 1

这是一个解决方案

http://jsfiddle.net/35r0m6rc/12/

这部分改变了：

$('#search').focus().keyup(function (e) {
    var search = $(this);
    var _search = search.val();
    if (e.which === 13){
        show_page(_search);
    }
});

$('.btn').click(function(){
    show_page($('#search').val());
});

function show_page(_search) {
    substringMatcher(template.content, _search, function (d) {
            $("#" + d[0].content)
            .delay(500)
            .fadeIn(500)
            .siblings()
            .fadeOut(500);
            search.val("")
        })
}

我制作了一个func来显示页面，由RETURN和按钮使用。

我很难让按钮工作

1 个答案: