feat: make repo selector searchable on create issue form

Replace the plain <select> with an HTML5 <input> + <datalist> pair so
users can type to filter repositories. Add debounced input handler for
label loading, change event for direct datalist selection, and client-side
validation that the entered value is a known repository.

Closes leeworks-agents/gitea-mobile#87

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

internal/templates/create_issue.html

@@ -6,16 +6,15 @@
 <form id="create-issue-form" hx-post="/issues" hx-swap="innerHTML" hx-target="#main-content">
   <div class="form-group">
     <label for="repo-select">Repository</label>
-    <select id="repo-select" name="owner_repo" required>
+    <input list="repo-options" id="repo-select" name="owner_repo"
-      <option value="">Select a repository...</option>
+           placeholder="Type to search repositories..." required autocomplete="off">
+    <datalist id="repo-options">
       {{range $org, $repos := .Repos}}
-      <optgroup label="{{$org}}">
         {{range $repos}}
         <option value="{{.Owner.Login}}/{{.Name}}">{{.FullName}}</option>
         {{end}}
-      </optgroup>
       {{end}}
-    </select>
+    </datalist>
     <input type="hidden" name="owner" id="owner-input">
     <input type="hidden" name="repo" id="repo-input">
   </div>
@@ -45,9 +44,16 @@
     var repoInput = document.getElementById('repo-input');
     var formError = document.getElementById('form-error');
 
+    // Build a set of valid repo values for validation.
+    var validRepos = {};
+    var options = document.getElementById('repo-options').options;
+    for (var i = 0; i < options.length; i++) {
+      validRepos[options[i].value] = true;
+    }
+
     function splitOwnerRepo() {
       var val = repoSelect.value;
-      if (val) {
+      if (val && val.indexOf('/') !== -1) {
         var parts = val.split('/');
         ownerInput.value = parts[0] || '';
         repoInput.value = parts[1] || '';
@@ -57,11 +63,31 @@
       }
     }
 
-    repoSelect.addEventListener('change', function() {
+    var debounceTimer = null;
+    repoSelect.addEventListener('input', function() {
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function() {
         splitOwnerRepo();
         var labelSection = document.getElementById('label-section');
         var labelList = document.getElementById('label-list');
-      if (ownerInput.value && repoInput.value) {
+        if (ownerInput.value && repoInput.value && validRepos[repoSelect.value]) {
+          labelList.innerHTML = '<span class="empty">Loading labels...</span>';
+          labelSection.style.display = 'block';
+          htmx.ajax('GET', '/issues/new/labels?owner=' + encodeURIComponent(ownerInput.value) + '&repo=' + encodeURIComponent(repoInput.value), {target: '#label-list', swap: 'innerHTML'});
+        } else {
+          labelSection.style.display = 'none';
+          labelList.innerHTML = '';
+        }
+      }, 300);
+    });
+
+    // Also handle the change event for when a datalist option is selected directly.
+    repoSelect.addEventListener('change', function() {
+      clearTimeout(debounceTimer);
+      splitOwnerRepo();
+      var labelSection = document.getElementById('label-section');
+      var labelList = document.getElementById('label-list');
+      if (ownerInput.value && repoInput.value && validRepos[repoSelect.value]) {
         labelList.innerHTML = '<span class="empty">Loading labels...</span>';
         labelSection.style.display = 'block';
         htmx.ajax('GET', '/issues/new/labels?owner=' + encodeURIComponent(ownerInput.value) + '&repo=' + encodeURIComponent(repoInput.value), {target: '#label-list', swap: 'innerHTML'});
@@ -80,6 +106,12 @@
         formError.style.display = 'block';
         return false;
       }
+      if (!validRepos[repoSelect.value]) {
+        evt.preventDefault();
+        formError.textContent = 'Please select a valid repository from the list.';
+        formError.style.display = 'block';
+        return false;
+      }
       formError.style.display = 'none';
     });