Ionic realization of Apple phone Address Book search function

Objective

Since the SRM mobile application was developed using the ionic1.x framework, the user experience was not very friendly due to the convenience of performance, so how to improve the application performance problem. At this point the ionic3.x framework has been released, because the ionic1.x framework was developed on the basis of ng1.x framework, but ionic3.x was developed on the basis of ng4.x. So called Ng official online to understand Ng's grammar and the use of rules, found that ng4.x is not forward-compatible, ng4.x is based on ES6 standards for development. In the spirit of the birth of the calf, I think the upgrade should not be too difficult, did not think that there are too many pits, the cost of Dickens to do an address book module. In order to follow up with the ionic3.x development of comrades to avoid my mistakes, go too many detours, in the spirit of open source will hereby contribute to the Address Book module to everyone.

Demand

Business Requirements Description

Business Requirements Description

1. Search for keywords, retrieve the contacts, group them, and clear the search keywords.

2. Highlight keywords.

3. The first letter in the right side is suspended to the right and can be quickly positioned when clicked. Displays the clicked letter centered and has a sliding animation effect.

According to the above, we write the static page simulation data, tidy up the good ideas, we can understand that we need to define the properties when developing.

1, define a string to hold the address of the requested directory, define a string variable to hold the search keyword, define an array to hold the first letter of the right check out, define a two-dimensional array to hold the Address book data, define a two-dimensional array to hold the search Address book data.

Implementation of code search keyword highlighting

Due to the previous ng1.x filter, can not be backwards compatible, ng4.x using pipe pipe to filter, understand the use of the start after the code. Here's how it's implemented:

The address book for simulating local data requests is as follows

Since the data format returned by the backend does not match the format of the data I need to process, the data is formatted first,

Search Keyword grouping display

Because the back end of the data format, and I need to deal with the data format does not match, so the first Data format processing, after the Array.fliter method to filter processing. The implementation code is as follows:

Right letter positioning

To each Address Book Group of search letter an id attribute, through the Elementref service to find the current DOM node and get the current location, through the IONIC3 in the content provided by the Scrollto function property quickly locate, the implementation process is as follows:

The rendered template page is as follows
The following class classes are implemented:

Summarize:

Although the functional requirements are relatively simple, but because the framework of the ng4.x is not very understanding led to go a lot of detours. Hope that the follow-up can bon voyage down.

Need source code can contact me. qq:991085978

Ionic realization of Apple phone Address Book search function