jQuery autoComplete() Selected String Not Passed in IE

Autocomplete seems to be doing its job up until the point when the user clicks on the 'Lookup' button.  The data passed in to the query is only the first few characters that the user types prior to clicking on a full string in jQuery's autoComplete() suggestion drop down.

For example: A user types 'Ruf'.  jQuery's autoComplete function suggests 'Rufus Coleman'.  The user then clicks on 'Rufus Coleman'.  The full string is transferred to the input field and reads 'Rufus Coleman'.  The user then clicks the 'Lookup' button which submits the form to our submitQuery function.  The data passed in from the input field is the full string in every browser but IE, where it is only the first few characters that the user typed.

Has anyone else experienced this?  Is there a fix that can be put in place to get IE to pass the full string placed in the input field by jQuery's autoComplete function?

For the record, this is being done in jQuery within a AngularJS SPA.  Code is below:

Input Field from indexContent.php:
<input type="text" ng-model="buyerLookUp" id="buyerLookUp" class="form-control" attr-placeholder="Type To Search" />

Open in new window


autoComplete instantiation within our setUp function from controller.js:
var apps4 = barFactory.getBuyers();
apps4.then(function(app4) {
    if(app4.length > 0) {
        var alist = [];
        for (var i=0; i<app4.length; i++) {
            alist.push(app4[i]);
            namesList.push(app4[i].NAME);
        }
        $scope.buyerList = alist;
        $scope.namesList = namesList;
        $('#buyerLookUp').autocomplete({
          source: namesList
        });
    }
});

Open in new window

LVL 1
brianmfallsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

brianmfallsAuthor Commented:
Oddly enough, it works as it should the first time in FireFox.  However, if I type in the box after the initial results are returned, it acts just like it does in IE.  Oh the joys of our work...

More Info:
In FireFox, it only replicates the error if I look for 'Rufus' and 'Rufus' is already displayed.  If I look for 'Karen', it works just like it did for 'Rufus' the first time.  So... in FF, we only see the error if we 'look' for the same person who was 'looked' for last.  Talk about silly...
hieloCommented:
Try giving your element a name attribute:
<input type="text" ng-model="buyerLookUp" id="buyerLookUp" name="buyerLookUp" class="form-control" attr-placeholder="Type To Search" />
brianmfallsAuthor Commented:
Good idea hielo.  Sadly, however, it didn't make any difference when I added the name attribute.
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

hieloCommented:
Have you tried adding a hidden field and "transferring" the value to the hidden field upon selection?  See below:

<input type="text" ng-model="buyerLookUp" id="buyerLookUp" name="buyerLookUp" class="form-control" attr-placeholder="Type To Search" />
<input type="hidden" name="theSelection"/>

$('#buyerLookUp').autocomplete({
	source: namesList
	,select: function(event, ui){
		// view the contents of ui in Chrome's console
		console.log("select:", ui);

		$("#theSelection").val(ui.item.value);
});

Open in new window

brianmfallsAuthor Commented:
hielo, You were close!  Close enough for me to get it worked out!  Thanks bud.  You always come through for me in a pinch.

Here's what I ended up with:

The Input (indexContent.php):
<input type="text" ng-model="buyerLookUp" id="buyerLookUp" name="buyerLookUp" class="form-control" />

Open in new window


The Script (controller.js):
var apps4 = barFactory.getBuyers();
apps4.then(function(app4) {
    if(app4.length > 0) {
        var alist = [];
        for (var i=0; i<app4.length; i++) {
            alist.push(app4[i]);
            namesList.push(app4[i].NAME);
        }
        $scope.buyerList = alist;
        $scope.namesList = namesList;
        $('#buyerLookUp').autocomplete({
            source: namesList,
            select: function(event, ui){
                $scope.buyerLookUp = ui.item.value;
            }
        });
    }
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
brianmfallsAuthor Commented:
My solution is the 'complete' fix for the issue.  It all came from hielo's input though!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.