小编H_C*_*H_C的帖子

在自动填充材质角度中的建议列表中添加带有链接的页脚

我正在使用(很棒的)Angular Material建立一个网站.我现在正在使用自动完成组件,我想在建议列表中添加固定页脚.您可以在下面的图片中看到,Pinterest将twitter和google +添加到用户搜索建议的页脚:

在此输入图像描述

我试图在html md-autocomplete组件中添加一个页脚:

<md-content layout-padding="" layout="column">
    <form ng-submit="$event.preventDefault()">
        <md-autocomplete ng-disabled="ctrl.isDisabled" md-no-cache="ctrl.noCache" md-selected-item="ctrl.selectedItem" md-search-text-change="ctrl.searchTextChange(ctrl.searchText)" md-search-text="ctrl.searchText" md-selected-item-change="ctrl.selectedItemChange(item)" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.name" md-min-length="0" placeholder="e-mail of naam " md-menu-class="autocomplete-custom-template">
            <md-item-template>
                <span class="item-title">
                    <md-icon md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
                    <span> {{item.name}} </span>
                </span>
            </md-item-template>
            <md-item-template>
                <footer><a href="">Some link</a></footer>   
            </md-item-template>
        </md-autocomplete>
    </form>
</md-content>

Run Code Online (Sandbox Code Playgroud)

不幸的是,这不起作用,没有任何东西显示.以下是材料自动完成的工作示例.

有人知道如何在Angular Material Autocomplete的建议中添加固定的页脚吗？欢迎所有提示!

autocomplete angularjs angular-material

H_C*_*H_C

2015 07-25

6
推荐指数

1
解决办法

1560
查看次数

Angular Typeahead:点击建议并立即发帖？

我正在研究一个项目,我正在使用Siyfion的角度Typeahead.我有一个Typeahead用于搜索用户.如果在建议下拉列表中找到用户名,您应该可以点击名称或按Enter键直接发帖,而不需要按下按钮进行发布.为此,我需要在其中一个用户名上"捕获"click-or-return事件.

下面你会发现HTML和它的JS,我也做了一个plunker以使事情变得更加清晰.

有谁知道我怎么能抓住点击和返回事件？欢迎所有提示!

<body ng-controller="MainCtrl">
    <input class='typeahead' type="text" sf-typeahead options="exampleOptions" datasets="numbersDataset" ng-model="selectedName">
    <input type="button" value="Post user to server" type="text" ng-click="postUserToServer(selectedName.id)">
</body>

Run Code Online (Sandbox Code Playgroud)

这是JS代码:

var app = angular.module('plunker', ['siyfion.sfTypeahead']);

app.controller('MainCtrl', function($scope) {

    $scope.selectedNumber = null;

    // instantiate the bloodhound suggestion engine
    var numbers = new Bloodhound({
        datumTokenizer: function(d) { 
        return Bloodhound.tokenizers.whitespace(d.name); },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: [
                   { name: 'John',id: 1 },
                   { name: 'Richard', id: 2 },
                   { name: 'Dennis', id: 3 }
        ]
    });

    // initialize the …

Run Code Online (Sandbox Code Playgroud)

javascript angularjs typeahead.js

H_C*_*H_C

lucky-day

6
推荐指数

1
解决办法

771
查看次数

如何让typeahead JS使用我的json文件

我想用Typeahead JS做一个简单的自动完成,但我不能让它工作.我按照手册中的说明操作,但我不确定我在这里做错了什么.我无法从json文件中获取正确的值.它是一个带有对象的数组,我只想要国家名称.我认为不应该那么难.我没有显示任何东西.请帮忙!您可以在Typeahead Github页面的"Getting Started"中找到typeahead js文件.

这是我的代码:

<head>
    <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="typeahead.jquery.min.js"></script>
    <script src="bloodhound.min.js"></script>
</head>

<body>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Countries">
</div> 
<script>

var countries = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 4,
    prefetch: {
        url: 'countries.json',
    }
});

countries.clearPrefetchCache();
countries.initialize();

$('#prefetch .typeahead').typeahead(null, {
    name: 'countries',
    displayKey: 'country',
    source: countries.ttAdapter(),
}); 

</script>


</body>`

Run Code Online (Sandbox Code Playgroud)

Json文件(countries.json):

[
    {
    "country": "Holland",
    "city": "Amsterdam"
    },
    {
    "country": "Belgium",
    "city": "Brussel"
    },
    {
    "country": "Germany",
    "city": "Berlin"
    },
    {
    "country": "France",
    "city": …

Run Code Online (Sandbox Code Playgroud)

typeahead bootstrap-typeahead

H_C*_*H_C

2015 03-18

5
推荐指数

2
解决办法

2万
查看次数