WHatever you did to search using student id is correct. But inside the listvew, you need to add few attributes to display the student details when you search using student id.
Add the Student First Name and Last Name inside the listview. Then search using the student ID, you will be displayed with the respective details of student based on the student id entered in search box
For example, you want display student details only when you perform search, instead of using listview, you can use templategrid.
Because, listview directly display the data to the user before search but in templategrid we can control using following options.
Update the show search bar dropdown and Wait for search radio button option under datasource tab of template grid like below and add Student ID , Student first name and Lastname in templategrid. So Until you search nothing will be displayed. When you perform search you will be displayed with respective student details based on the student id entered in search box
You are welcome. Create one custom class for template grid.Mention the newly created class inside the templategrid as shown below
For example, customtemplategrid
Add this css in your custom.scss file and then compile the file using Koala complier. After compilation, this css will be added to your custom.css file. This css will help you to change the width of searchbox