2

UPDATE

I thought about this and this is what I'm thinking. Maybe I can just filter the list on input (when I type into the input box) rather than automatically have this filter. Is this possible?


I've created a combo box with angular, and I've bound a scope variable to my input using ng-model. Right now the functionality is, you can search for an item in the dropdown. when you click on an item in the dropdown, that value is copied into the input.

however, when I go back into the input to search again, it only brings up items that match the search, which is expected. But I'd like to make it so when you click on the input again, the text that was in the input stays there, but the drop down shows all results.

is this doable? Maybe I can bind a different scope variable to the value of the input?

heres the fiddle: https://jsfiddle.net/mLsbmfb7/25/

html:

<div class='center' ng-app="myapp" ng-controller="appCont">
    <div class='form-box'>
        <div class='inputs-box'>
            <div>
                <span>First</span>
                <input type='text' ng-model="firstname"/>
            </div>
            <div>
                <span>Last</span>
                <input type='text' ng-model="lastname"/>
            </div>
        </div>
        <div class='add-button' ng-click="addPerson()">
            add
        </div>
    </div>
    <div class='ppl-list-title'>
        <div class='inputs-box'>
            <div class='inline-block-top find-word'>Find</div>
            <div class='inline-block-top'>
                <input id='filter-input' type='text' ng-model='filterText'/>
                <div>
                    <ul class='hidden'>
                        <li ng-repeat='person in people2 | filter:{fullName:filterText}'
                        ng-click='setInputValue(person.fullName)'>
                            <span class=''>{{person.fullName}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

controller and jquery:

var myapp = angular.module("myapp", []);
myapp.controller('appCont', function($scope) {
    $scope.firstname = "";
    $scope.lastname = "";
    $scope.fullname = function() {
        return $scope.firstname + ' ' + $scope.lastname;
    };
    var Person = function(){
        this.firstname = "";
        this.lastname = "";
        this.isActive = true;
        this.fullName = "";

    };
    function getFullName(first, last) {
            return first 
                + " " 
                + last
    };
    function getPerson(first, last, active) {
        var newPerson = new Person();
        newPerson.firstname = first;
        newPerson.lastname = last;
        newPerson.isActive = active;
        newPerson.fullName = first + ' ' + last;
        return newPerson;
    }; 
    $scope.addPerson = function() {
        var personToAdd = 
            getPerson($scope.firstname, $scope.lastname, true);
        $scope.people2.push(personToAdd);
        $scope.firstname = '';
        $scope.lastname = '';

    };
    $scope.setInputValue = function(full) {
        $scope.filterText = full;
    };
    $scope.people2 = [
        getPerson("first", "test", true),
        getPerson("second", "try", false),
        getPerson("third", "testing", true)];
});

$(document).ready(function() {
    $('#filter-input').on('focusin', function() {
        $('ul').slideToggle();
    });
    $('#filter-input').on('focusout', function() {
        $('ul').slideToggle();
    });
});

function stringFullTrim(word) {
    while(word.indexOf('  ') > -1) {
        word = word.replace('  ', ' ');
    }
    return word.trim();
}
3
  • my bad, I just understood what you meant. You want the search dropdown input to keep the search text but then show all the results when you click it again. Jun 24, 2015 at 16:22
  • @zsherman yes thats correct Jun 24, 2015 at 16:23
  • @zsherman that's good but it got rid of the filtering. I still want the filtering to kick in once I type into the input Jun 24, 2015 at 16:29

1 Answer 1

1

Did it by using a fake text input to update the real filter.

<input id='filter-input' type='text' ng-model='temp' ng-keyup='filterText = temp'/>
<input id='filter-input' type='hidden' ng-model='filterText'/>

Then on selecting, copy text into it and wipe the filter, so next search would be fresh again.

<li ng-repeat='person in people2 | filter:{fullName:filterText}'
    ng-click='setInputValue(person.fullName); $parent.temp = person.fullName; $parent.filterText = ""'>

You might want to handle some edge cases like user typed the full thing but didn't select.

Note: the $parent is used because of ng-repeat is creating a child scope. The usual way to solve this is to use "the dot" but sometimes I feel like using $parent.

I've edited your fiddle

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.