Custom Auto-complete Angular-Material

2
votes

Background

I am using Angular Material, and I want to do a custom auto-complete inspired in the custom auto-complete example they provide.

Problem

The exact result that I want is the following:

desired_output

However, this is what I am getting:

current_output

The problem is that no matter what I do, my list of items is never shows correctly !

What I tried

To achieve this I read several tutorials, and I managed to piece together the following HTML code:

index.html:

<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Custom-Complete</title>

    <!--CSS files-->
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.min.css">
</head>

<body ng-app="MyApp" ng-cloak>

    <div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak="" class="autocompletedemoCustomTemplate" ng-app="MyApp">
        <md-content layout-padding="" layout="column">
            <form ng-submit="$event.preventDefault()">

                <md-autocomplete 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.Company_Name" md-min-length="0" placeholder="Write client Info" md-menu-class="autocomplete-custom-template">
                    <md-item-template>

                        <span class="item-title">
                            <b>Company name:</b> {{item.Company_Name}}
                        </span>

                        <span class="item-metadata">
                            <b>Client Ids:</b>
                            <span ng-repeat="clientId in item.Assets">
                                <span class="item-metastat">
                                    &emsp;<ng-md-icon icon="subdirectory_arrow_right" style="fill: gray" size="24"></ng-md-icon>{{clientId}}
                                </span>
                            </span>
                        </span>
                    </md-item-template>
                </md-autocomplete>
            </form>
        </md-content>
    </div>

    <!-- Angular Material requires Angular.js Libraries -->
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
    <script src="../node_modules/angular-material/angular-material.min.js"></script>
    <script src="../node_modules/angular-material-icons/angular-material-icons.min.js"></script>

    <!-- Your application bootstrap  -->
    <script type="text/javascript" src="js/autocomplete.js"></script>
</body>

</html>

I guess that my problem is that I don't know which HTML tags I need to use, nor how I need to use them!

Extra Info

These are the libraries I am using and their versions (Specially important, is the version of Angular Material - v1.0.9):

"angular": "^1.5.6",
"angular-animate": "^1.5.6",
"angular-aria": "^1.5.6",
"angular-material": "^1.0.9"
"angular-messages": "^1.5.6",
"express": "^3.2.6"

Question

  • What is wrong in my code, and how can I fix it?

Solution

After the answers provided here, I finally updated my github repository. If you think this is something you would like to have, feel free to clone it and give it a look !

Thanks for the help!

2
javascriptangularjsautocompleteangular-material

2 Answers

3
votes

I suggest you read up about block vs inline elements. As the first problem is that you are using inline elements (span) when you want block elements, e.g. a paragraph.

An example of the type of code you are looking for in the md-item-template is below.

<p>Company Name: {{item.Company_Name}}</p>
<p>Client Ids:</p>
<div ng-repeat="clientId in item.Assets" class="addAClassForTheLeftPaddingLeftEtc">
    <ng-md-icon ...></ng-md-icon>{{clientId}}
</div>

The second problem is that you need to override some of the angular material styles to get your solution working the way you want. For example, by default each item in the angular material autocomplete has a fixed size of 48px. You don't want this and need to override it with some css like this:

.md-autocomplete-suggestions-container .md-autocomplete-suggestions li {
  line-height: inherit;
  height: auto;
}

To get it working exactly the way you want you might need to override some of the other angular material css. It can be a bit tricky sometimes, but you can use something like the chrome dev tools to find out what you need to override.

1
votes

Seems that the span are not creating a new line and they are just one next to the other.

Modify the template with div's, so they create a new line for each element.

               <md-item-template>

                    <div class="item-title">
                        <b>Company name:</b> {{item.Company_Name}}
                    </div>

                    <div class="item-metadata">
                        <b>Client Ids:</b>
                        <span ng-repeat="clientId in item.Assets">
                            <span class="item-metastat">
                                &emsp;<ng-md-icon ...></ng-md-icon>{{clientId}}
                            </span>
                        </span>
                    </div>
                </md-item-template>