I followed the solution on this link to have my input field filter options in the datalist using contains instead of starts with. The solution works but I have a problem with the display. The options shows both the "value" and the "innerText" on the options list as shown below:
What I wanted to do is to make the first line smaller and the second line bigger but I am not sure if this is possible and what element should I style for this.
Here's the html code that I have:
<div class="inputFieldBorder item item-input">
<div class="row">
<input type="text"
name="prodList"
id= "prodList"
maxlength = "50"
placeholder = "Things to Buy"
ng-model="listData.header.newProduct"
list="productlist">
<datalist id="productlist">
<select >
<option ng-repeat="productname in allproducts" value="{{productname.productName}}">{{productname.productName}}</option>
</select>
</datalist>
<button ng-disabled="!listData.header.newProduct"
class="button button-icon ion-android-close input-button"
ng-click="clearSelection()"></button>
</div>
</div>
