0

I'm fairly new to angularjs and been trying to use ui.bootstrap.typeahead to create an typeahead functionality for a text field. I need it to work for the text fields on a SharePoint list form.

Basically, I'm adding a CEWP to include my angularjs script in the list form. The input text fields on form are created by SharePoint on page load and I need to get hold a text field and make it behave like autocomplete, all using script.

For e.g - in the image below, need to make Title field - an autocomplete field.

SP 2013 Field - Typeahead feature

Note: I don't have access to customise editform.aspx and hence, need to add ui.bootstrap.typeahead to the field on the fly or say dynamically through CEWP.

Can someone shed some light / approach / any directions ?

Thanks in advance.

Improve this question

2 Answers 2

Reset to default
0

There's no benefit from the angular framework here, so I suggest you don't use it. Try jQuery, it should have javascript typeahead plugin and it's easy to attach functionality to elements with jQuery. To use angular, you would need to inject too many things into your page.

Would have commented, but dont have privilege in this community since question was moved.

Improve this answer
0

A cleaner option is to dynamically inject a <div> / <input> html snippet around the text field that you want to convert to typeahead and hide the text field.

You need to add a js function that can achieve this.

Say the id of the textbox is xyz.

Adding the HTML snippet would look something like this :

$('#xyz').parent().append('<div id='autoText' typeahead='a for b in c'></div>')

then simply hide the actual control $('#xyz').hide()`

  1. .parent()
  2. Dynamically Add Textboxes
Improve this answer

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.